Bootstrap React Floating labels

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

On this page

Example#

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

Email address

Password

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.

Input with value

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

Textareas#

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

Comments

1<CFormFloating>
2  <CFormTextarea
3    id="floatingTextarea"
4    placeholder="Leave a comment here"
5  ></CFormTextarea>
6  <CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
7</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).

Comments

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

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.

Works with selects

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

Layout#

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

Email address

Works with selects

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

API#

CFormFloating#

1import { CFormFloating } from '@coreui/bootstrap-react'
2// or
3import CFormFloating from '@coreui/bootstrap-react/src/components/form/CFormFloating'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-