Angular Floating Labels Component
Angular floating label component. Create beautifully simple form labels that float over your input fields.
Example
Wrap a pair of cFormControl and label
elements in cFormControl to enable floating labels with textual form
fields. A placeholder is required on each input
as our method of CSS-only floating labels uses the :placeholder-shown
pseudo-element. Also note that the cFormControl must come first so
we can utilize a sibling selector (ex., ~).
When there's a value already defined, cLabel will automatically adjust to their floated position.
Textareas
By default, textarea will be the same height as input.
To set a custom height on your textarea, do not use the rows attribute. Instead, set an explicit height (either
inline or via custom CSS).
Selects
Other than input, floating labels are only available on
cSelect. They work in the same way, but unlike
input, it always shows the cLabel in its floated state.
Selects with size and multiple 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
| name | description | type | default |
|---|---|---|---|
cFormFloating |
Enable floating labels. | boolean |
true |