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.

On this page

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. The placeholder stays hidden while the label rests in the field, and shows under the floated label once the field has focus.

import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabelsExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingInput"
        floatingClassName="mb-4"
        floatingLabel="Email address"
        placeholder="[email protected]"
      />
      <CFormInput
        type="password"
        id="floatingPassword"
        floatingLabel="Password"
        placeholder="••••••••"
      />
    </>
  )
}

import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabelsExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingInput"
        floatingClassName="mb-4"
        floatingLabel="Email address"
        placeholder="[email protected]"
      />
      <CFormInput
        type="password"
        id="floatingPassword"
        floatingLabel="Password"
        placeholder="••••••••"
      />
    </>
  )
}

Using `<CFormFloating>`

You can also wrap a <CFormInput> and <CFormLabel> pair inside a <CFormFloating> container. Write the label first, so a screen reader announces it before the field’s value; the input-first order keeps working.

<CFormFloating className="mb-4">
  <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
  <CFormInput type="email" id="floatingInput" placeholder="[email protected]" />
</CFormFloating>
<CFormFloating>
  <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
  <CFormInput type="password" id="floatingPassword" placeholder="••••••••" />
</CFormFloating>

Pre-filled values

Floating labels adjust automatically when inputs have a preset value.

import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabels2Example = () => {
  return (
    <CFormInput
      type="email"
      id="floatingInputValue"
      floatingLabel="Input with value"
      placeholder="[email protected]"
      defaultValue="[email protected]"
    />
  )
}

import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabels2Example = () => {
  return (
    <CFormInput
      type="email"
      id="floatingInputValue"
      floatingLabel="Input with value"
      placeholder="[email protected]"
      defaultValue="[email protected]"
    />
  )
}

Validation support

Floating labels integrate seamlessly with form validation styles.

import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabelsValidationExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingInputValid"
        floatingClassName="mb-4"
        floatingLabel="Email addresss"
        placeholder="[email protected]"
        defaultValue="[email protected]"
        validationState="valid"
      />
      <CFormInput
        type="email"
        id="floatingInputInvalid"
        floatingLabel="Email addresss"
        placeholder="[email protected]"
        defaultValue="[email protected]"
        validationState="invalid"
      />
    </>
  )
}

import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabelsValidationExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingInputValid"
        floatingClassName="mb-4"
        floatingLabel="Email addresss"
        placeholder="[email protected]"
        defaultValue="[email protected]"
        validationState="valid"
      />
      <CFormInput
        type="email"
        id="floatingInputInvalid"
        floatingLabel="Email addresss"
        placeholder="[email protected]"
        defaultValue="[email protected]"
        validationState="invalid"
      />
    </>
  )
}

Textareas

Textareas styled with floating labels maintain the same height as inputs by default.

import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FloatingLabelsTextareaExample = () => {
  return (
    <CFormTextarea
      id="floatingTextarea"
      floatingLabel="Comments"
      placeholder="Leave a comment here"
    ></CFormTextarea>
  )
}

import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FloatingLabelsTextareaExample = () => {
  return (
    <CFormTextarea
      id="floatingTextarea"
      floatingLabel="Comments"
      placeholder="Leave a comment here"
    ></CFormTextarea>
  )
}

To change the height, set an explicit height via inline styles or custom CSS rather than using the rows attribute.

import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FloatingLabelsTextarea2Example = () => {
  return (
    <CFormTextarea
      placeholder="Leave a comment here"
      id="floatingTextarea2"
      floatingLabel="Comments"
      style={{ height: '100px' }}
    ></CFormTextarea>
  )
}

import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FloatingLabelsTextarea2Example = () => {
  return (
    <CFormTextarea
      placeholder="Leave a comment here"
      id="floatingTextarea2"
      floatingLabel="Comments"
      style={{ height: '100px' }}
    ></CFormTextarea>
  )
}

Select elements

Floating labels also support <CFormSelect>. The label always appears in the floated state. Note: This is not compatible with size or multiple.

import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FloatingLabelsSelectExample = () => {
  return (
    <CFormSelect
      id="floatingSelect"
      floatingLabel="Works with selects"
      aria-label="Floating label select example"
    >
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </CFormSelect>
  )
}

import React from 'react'
import { CFormSelect } from '@coreui/react'

export const FloatingLabelsSelectExample = () => {
  return (
    <CFormSelect
      id="floatingSelect"
      floatingLabel="Works with selects"
      aria-label="Floating label select example"
    >
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </CFormSelect>
  )
}

Date and time

Date, time, datetime-local, month, and week inputs also always show the label in its floated state. These controls do not support placeholders the way textual inputs do, so a placeholder is not required (and is ignored by most browsers on these types). For a field that formats its value by locale, use the Date Picker or the Time Picker with the floatingLabel property.

import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabelsDateTimeExample = () => {
  return (
    <>
      <CFormInput type="date" id="floatingDate" floatingClassName="mb-4" floatingLabel="Date" />
      <CFormInput type="time" id="floatingTime" floatingLabel="Time" />
    </>
  )
}

import React from 'react'
import { CFormInput } from '@coreui/react'

export const FloatingLabelsDateTimeExample = () => {
  return (
    <>
      <CFormInput type="date" id="floatingDate" floatingClassName="mb-4" floatingLabel="Date" />
      <CFormInput type="time" id="floatingTime" floatingLabel="Time" />
    </>
  )
}

Always floating

Set floatingLabelAlways on the form control, or always on <CFormFloating>, to keep the label floated and show the placeholder.

import React from 'react'
import { CFormFloating, CFormInput, CFormLabel } from '@coreui/react'

export const FloatingLabelsAlwaysExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="alwaysFloatingInput"
        floatingClassName="mb-4"
        floatingLabel="Email address"
        floatingLabelAlways
        placeholder="[email protected]"
      />
      <CFormFloating always>
        <CFormLabel htmlFor="alwaysFloatingPassword">Password</CFormLabel>
        <CFormInput type="password" id="alwaysFloatingPassword" placeholder="••••••••" />
      </CFormFloating>
    </>
  )
}

import React from 'react'
import { CFormFloating, CFormInput, CFormLabel } from '@coreui/react'

export const FloatingLabelsAlwaysExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="alwaysFloatingInput"
        floatingClassName="mb-4"
        floatingLabel="Email address"
        floatingLabelAlways
        placeholder="[email protected]"
      />
      <CFormFloating always>
        <CFormLabel htmlFor="alwaysFloatingPassword">Password</CFormLabel>
        <CFormInput type="password" id="alwaysFloatingPassword" placeholder="••••••••" />
      </CFormFloating>
    </>
  )
}

The date and time pickers take floatingLabelAlways as well.

import React from 'react'
import { CDatePicker } from '@coreui/react-pro'

export const FloatingLabelsAlwaysDatePickerExample = () => (
  <CDatePicker floatingLabel="Delivery date" floatingLabelAlways locale="en-US" />
)

import React from 'react'
import { CDatePicker } from '@coreui/react-pro'

export const FloatingLabelsAlwaysDatePickerExample = () => (
  <CDatePicker floatingLabel="Delivery date" floatingLabelAlways locale="en-US" />
)

By default, placeholders stay transparent until the control is focused. With floatingLabelAlways, the placeholder stays visible in both states, so keep it short on a textarea, where the floated label covers its first line.

Grid layout support

Use floating labels within the CoreUI Bootstrap grid system by nesting inputs inside column classes.

import React from 'react'
import { CCol, CFormInput, CFormSelect, CRow } from '@coreui/react'

export const FloatingLabelsLayoutExample = () => {
  return (
    <CRow xs={{ gutter: 3 }}>
      <CCol md>
        <CFormInput
          type="email"
          id="floatingInputGrid"
          floatingLabel="Email address"
          placeholder="[email protected]"
          defaultValue="[email protected]"
        />
      </CCol>
      <CCol md>
        <CFormSelect
          id="floatingSelectGrid"
          floatingLabel="Email address"
          aria-label="Works with selects"
        >
          <option>Open this select menu</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CCol>
    </CRow>
  )
}

import React from 'react'
import { CCol, CFormInput, CFormSelect, CRow } from '@coreui/react'

export const FloatingLabelsLayoutExample = () => {
  return (
    <CRow xs={{ gutter: 3 }}>
      <CCol md>
        <CFormInput
          type="email"
          id="floatingInputGrid"
          floatingLabel="Email address"
          placeholder="[email protected]"
          defaultValue="[email protected]"
        />
      </CCol>
      <CCol md>
        <CFormSelect
          id="floatingSelectGrid"
          floatingLabel="Email address"
          aria-label="Works with selects"
        >
          <option>Open this select menu</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CCol>
    </CRow>
  )
}

API reference

Refer to the API documentation for detailed descriptions of all available props and configuration options.

<CFormFloating />