React Floating labels

Floating labels

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

Available in Other JavaScript Frameworks

CoreUI React Floating labels is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:

On this page

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. 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="••••••••"
      />
    </>
  )
}

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. Write the <CFormLabel> first, so a screen reader announces it before the field’s value. The control-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>

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

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]"
    />
  )
}

Form validation styles also work as expected.

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

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

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 set a custom height on your <CFormTextarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).

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

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.

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" />
    </>
  )
}

Disabled

Add the disabled boolean property on a <CFormInput>, a <CFormTextarea> or a <CFormSelect> to give it a grayed out appearance, remove pointer events, and prevent focusing.

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

export const FloatingLabelsDisabledExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingInputDisabled"
        floatingClassName="mb-4"
        floatingLabel="Email address"
        placeholder="[email protected]"
        disabled
      />
      <CFormTextarea
        id="floatingTextareaDisabled"
        floatingClassName="mb-4"
        floatingLabel="Comments"
        placeholder="Leave a comment here"
        disabled
      />
      <CFormTextarea
        id="floatingTextarea2Disabled"
        floatingClassName="mb-4"
        floatingLabel="Comments"
        placeholder="Leave a comment here"
        style={{ height: '100px' }}
        defaultValue="Disabled textarea with some text inside"
        disabled
      />
      <CFormSelect
        id="floatingSelectDisabled"
        floatingLabel="Works with selects"
        aria-label="Floating label disabled select example"
        disabled
      >
        <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 { CFormInput, CFormSelect, CFormTextarea } from '@coreui/react'

export const FloatingLabelsDisabledExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingInputDisabled"
        floatingClassName="mb-4"
        floatingLabel="Email address"
        placeholder="[email protected]"
        disabled
      />
      <CFormTextarea
        id="floatingTextareaDisabled"
        floatingClassName="mb-4"
        floatingLabel="Comments"
        placeholder="Leave a comment here"
        disabled
      />
      <CFormTextarea
        id="floatingTextarea2Disabled"
        floatingClassName="mb-4"
        floatingLabel="Comments"
        placeholder="Leave a comment here"
        style={{ height: '100px' }}
        defaultValue="Disabled textarea with some text inside"
        disabled
      />
      <CFormSelect
        id="floatingSelectDisabled"
        floatingLabel="Works with selects"
        aria-label="Floating label disabled select example"
        disabled
      >
        <option>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </CFormSelect>
    </>
  )
}

Readonly plaintext

Floating labels also support the plainText property, which can be helpful for toggling from an editable <CFormInput> to a plaintext value without affecting the page layout.

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

export const FloatingLabelsPlaintextExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingEmptyPlaintextInput"
        floatingClassName="mb-4"
        floatingLabel="Empty input"
        placeholder="[email protected]"
        plainText
        readOnly
      />
      <CFormInput
        type="email"
        id="floatingPlaintextInput"
        floatingLabel="Input with value"
        placeholder="[email protected]"
        defaultValue="[email protected]"
        plainText
        readOnly
      />
    </>
  )
}

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

export const FloatingLabelsPlaintextExample = () => {
  return (
    <>
      <CFormInput
        type="email"
        id="floatingEmptyPlaintextInput"
        floatingClassName="mb-4"
        floatingLabel="Empty input"
        placeholder="[email protected]"
        plainText
        readOnly
      />
      <CFormInput
        type="email"
        id="floatingPlaintextInput"
        floatingLabel="Input with value"
        placeholder="[email protected]"
        defaultValue="[email protected]"
        plainText
        readOnly
      />
    </>
  )
}

Input groups

Floating labels also support <CInputGroup> — put the floating control next to the other addons:

import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const FloatingLabelsInputGroupExample = () => {
  return (
    <CInputGroup>
      <CInputGroupText>@</CInputGroupText>
      <CFormInput type="text" id="floatingInputGroup1" floatingLabel="Username" placeholder="mdo" />
    </CInputGroup>
  )
}

import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const FloatingLabelsInputGroupExample = () => {
  return (
    <CInputGroup>
      <CInputGroupText>@</CInputGroupText>
      <CFormInput type="text" id="floatingInputGroup1" floatingLabel="Username" placeholder="mdo" />
    </CInputGroup>
  )
}

When using <CInputGroup> and floating labels along with form validation, wrap the group in .form-field, mark the <CInputGroup> with is-invalid, and place the feedback outside it, so it renders under the whole group rather than inside the frame:

import React from 'react'
import {
  CFormFeedback,
  CFormField,
  CFormFloating,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react'

export const FloatingLabelsInputGroupValidationExample = () => {
  return (
    <CFormField>
      <CInputGroup className="is-invalid">
        <CInputGroupText>@</CInputGroupText>
        <CFormFloating className="is-invalid">
          <CFormInput
            type="text"
            id="floatingInputGroup2"
            placeholder="mdo"
            validationState="invalid"
            required
          />
          <CFormLabel htmlFor="floatingInputGroup2">Username</CFormLabel>
        </CFormFloating>
      </CInputGroup>
      <CFormFeedback validationState="invalid">Please choose a username.</CFormFeedback>
    </CFormField>
  )
}

import React from 'react'
import {
  CFormFeedback,
  CFormField,
  CFormFloating,
  CFormInput,
  CFormLabel,
  CInputGroup,
  CInputGroupText,
} from '@coreui/react'

export const FloatingLabelsInputGroupValidationExample = () => {
  return (
    <CFormField>
      <CInputGroup className="is-invalid">
        <CInputGroupText>@</CInputGroupText>
        <CFormFloating className="is-invalid">
          <CFormInput
            type="text"
            id="floatingInputGroup2"
            placeholder="mdo"
            validationState="invalid"
            required
          />
          <CFormLabel htmlFor="floatingInputGroup2">Username</CFormLabel>
        </CFormFloating>
      </CInputGroup>
      <CFormFeedback validationState="invalid">Please choose a username.</CFormFeedback>
    </CFormField>
  )
}

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.

Layout

When working with the CoreUI for React grid system, be sure to place form elements within 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

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

<CFormFloating />