React Floating labels

Wrap a pair of <CFormInput> and <CFormLabel> elements in CFormFloating to enable floating labels with textual form fields. A placeholder is required on each <CFormInput> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <CFormInput> must come first so we can utilize a sibling selector (e.g., ~).

When there's a value already defined, <CFormLabel>s will automatically adjust to their floated position.

React Floating labels Textareas

By default, <CFormTextarea>s will be the same height as <CFormInput>s.

To set a custom height on your <CFormTextarea;>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).

React Floating labels Selects

Other than <CFormInput>, floating labels are only available on <CFormSelect>s. They work in the same way, but unlike <CFormInput>s, they'll always show the <CFormLabel> in its floated state. Selects with size and multiple are not supported.

React Floating labels Layout

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