Example

Wrap a pair ofcFormControl andlabelelements incFormControl to enable floating labels with textual formfields. Aplaceholder is required on eachinputas our method of CSS-only floating labels uses the:placeholder-shownpseudo-element. Also note that thecFormControl must come first sowe can utilize a sibling selector (ex.,~).

When there's avalue already defined,cLabel will automatically adjust to their floated position.

Textareas

By default,textarea will be the same height asinput.

To set a custom height on yourtextarea, do not use the rows attribute. Instead, set an explicit height (eitherinline or via custom CSS).

Selects

Other thaninput, floating labels are only available oncSelect. They work in the same way, but unlikeinput, it always shows thecLabel in its floated state.

Selects withsize andmultiple are not supported.

Layout

When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.

API reference

Form Module

cFormFloating

directive

Inputs