React Bootstrap Floating Labels Component
Floating Labels with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to create clean and accessible floating form labels in React using CoreUI components styled with Bootstrap.
How to use React Bootstrap Floating Labels component#
Use CoreUI’s <CFormFloating>, <CFormInput>, <CFormSelect>, and <CFormTextarea> components with Bootstrap styling to create floating labels in React. Floating labels automatically animate above form fields when content is entered or focused.
Basic example#
Enable floating labels by setting the floatingLabel prop on supported form controls. A placeholder is required as the floating label effect relies on the :placeholder-shown pseudo-class.
Using <CFormFloating>#
You can also wrap a <CFormInput> and <CFormLabel> pair inside a <CFormFloating> container. Make sure the input comes first to enable proper sibling selector behavior.
<CFormFloating className="mb-3"> <CFormLabel htmlFor="floatingInput">Email address</CFormLabel></CFormFloating><CFormFloating> <CFormInput type="password" id="floatingPassword" placeholder="Password" /> <CFormLabel htmlFor="floatingPassword">Password</CFormLabel></CFormFloating>Pre-filled values#
Floating labels adjust automatically when inputs have a preset value.
Validation support#
Floating labels integrate seamlessly with form validation styles.
Textareas#
Textareas styled with floating labels maintain the same height as inputs by default.
To change the height, set an explicit height via inline styles or custom CSS rather than using the rows attribute.
Select elements#
Floating labels also support <CFormSelect>. The label always appears in the floated state. Note: This is not compatible with size or multiple.
Grid layout support#
Use floating labels within the CoreUI Bootstrap grid system by nesting inputs inside column classes.
API reference#
Refer to the API documentation for detailed descriptions of all available props and configuration options.