Framework:
DownloadGet CoreUI PRO

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-
On this page

CoreUI for React is Open Source UI Components Library for React.js.

Code licensed MIT, docs CC BY 3.0.