React Floating labels

React floating label component. Create beautifully simple form labels that float over your input fields.

Example#

Use floatingLabel property on <CFormInput>, <CFormSelect> or <CFormTextarea> to enable floating labels with textual form fields. A placeholder is required on each <CFormInput>, <CFormSelect> and <CFormTextarea> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element.

1<CFormInput type="email" id="floatingInput" floatingLabel="Email address" placeholder="[email protected]" />
2<CFormInput type="password" id="floatingPassword" floatingLabel="Password" placeholder="Password" />

You can create the same form control by wrapping 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., ~).

1<CFormFloating className="mb-3">
2 <CFormInput type="email" id="floatingInput" placeholder="[email protected]" />
3 <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
4</CFormFloating>
5<CFormFloating>
6 <CFormInput type="password" id="floatingPassword" placeholder="Password" />
7 <CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>
8</CFormFloating>

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

1<CFormInput
2 type="email"
3 id="floatingInputValue"
4 floatingLabel="Input with value"
5 placeholder="[email protected]"
6 defaultValue="[email protected]"
7/>

Form validation styles also work as expected.

1<CFormInput
2 type="email"
3 id="floatingInputInvalid"
4 floatingLabel="Email addresss"
5 placeholder="[email protected]"
6 defaultValue="[email protected]"
7 valid
8/>
9<CFormInput
10 type="email"
11 id="floatingInputInvalid"
12 floatingLabel="Email addresss"
13 placeholder="[email protected]"
14 defaultValue="[email protected]"
15 invalid
16/>

Textareas#

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

1<CFormTextarea
2 id="floatingTextarea"
3 floatingLabel="Comments"
4 placeholder="Leave a comment here"
5></CFormTextarea>
6</CFormFloating>

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).

1<CFormTextarea
2 placeholder="Leave a comment here"
3 id="floatingTextarea2"
4 floatingLabel="Comments"
5 style={{ height: '100px' }}
6></CFormTextarea>

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.

1<CFormSelect
2 id="floatingSelect"
3 floatingLabel="Works with selects"
4 aria-label="Floating label select example"
5>
6 <option>Open this select menu</option>
7 <option value="1">One</option>
8 <option value="2">Two</option>
9 <option value="3">Three</option>
10</CFormSelect>

Layout#

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

1<CRow xs={{ gutter: 2 }}>
2 <CCol md>
3 <CFormInput
4 type="email"
5 id="floatingInputGrid"
6 floatingLabel="Email address"
7 placeholder="[email protected]"
8 defaultValue="[email protected]"
9 />
10 </CCol>
11 <CCol md>
12 <CFormSelect
13 id="floatingSelectGrid"
14 floatingLabel="Email address"
15 aria-label="Works with selects"
16 >
17 <option>Open this select menu</option>
18 <option value="1">One</option>
19 <option value="2">Two</option>
20 <option value="3">Three</option>
21 </CFormSelect>
22 </CCol>
23</CRow>

API#

CFormFloating#

1import { CFormFloating } from '@coreui/react'
2// or
3import CFormFloating from '@coreui/react/src/components/form/CFormFloating'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-