Tailwind CSS Floating Label - Flowbite

Use the floating label style for the input field elements to replicate the Material UI design system from Google and choose from multiple styles and sizes

Table of Contents#

Floating label example#

Get started with the following three styles for the floating label component and use the label tag as a visual placeholder using the peer-placeholder-shown and peer-focus utility classes from Tailwind CSS.

Edit on GitHub

  • React TypeScript
'use client';

import { FloatingLabel } from 'flowbite-react';

export default function FloatingLabel() {
  return (
    <>
      <FloatingLabel
        label="Label"
        variant="filled"
      />
      <FloatingLabel
        label="Label"
        variant="outlined"
      />
      <FloatingLabel
        label="Label"
        variant="standard"
      />
    </>
  )
}

Disabled state#

Apply the disabled attribute to the input fields to disallow the user from changing the content.

Edit on GitHub

  • React TypeScript
'use client';

import { FloatingLabel } from 'flowbite-react';

export default function FloatingLabel() {
  return (
    <>
      <FloatingLabel
        disabled
        label="Label"
        variant="filled"
      />
      <FloatingLabel
        disabled
        label="Label"
        variant="outlined"
      />
      <FloatingLabel
        disabled
        label="Label"
        variant="standard"
      />
    </>
  )
}

Validation#

Use the following examples of input validation for the success and error messages by applying the validation text below the input field and using the green or red color classes from Tailwind CSS.

Edit on GitHub

  • React TypeScript
'use client';

import { div } from 'flowbite-react';

export default function FloatingLabel() {
  return (
    <>
      <div className="grid grid-flow-col justify-stretch space-x-4">
        <FloatingLabel
          color="error"
          label="Filled Success"
          variant="filled"
        />
        <FloatingLabel
          color="error"
          label="Outlined Success"
          variant="outlined"
        />
        <FloatingLabel
          color="error"
          label="Standard Success"
          variant="standard"
        />
      </div>
      <div className="grid grid-flow-col justify-stretch space-x-4">
        <FloatingLabel
          color="success"
          label="Filled Error"
          variant="filled"
        />
        <FloatingLabel
          color="success"
          label="Outlined Error"
          variant="outlined"
        />
        <FloatingLabel
          color="success"
          label="Standard Error"
          variant="standard"
        />
      </div>
    </>
  )
}

Sizes#

Use the small and default sizes of the floating label input fields from the following example.

Edit on GitHub

  • React TypeScript
'use client';

import { div } from 'flowbite-react';

export default function FloatingLabel() {
  return (
    <>
      <div className="grid grid-flow-col justify-stretch space-x-4">
        <FloatingLabel
          label="Small Filled"
          sizing="sm"
          variant="filled"
        />
        <FloatingLabel
          label="Small Outlined"
          sizing="sm"
          variant="outlined"
        />
        <FloatingLabel
          label="Small Standard"
          sizing="sm"
          variant="standard"
        />
      </div>
      <div className="grid grid-flow-col justify-stretch space-x-4">
        <FloatingLabel
          label="Default Filled"
          variant="filled"
        />
        <FloatingLabel
          label="Default Outlined"
          variant="outlined"
        />
        <FloatingLabel
          label="Default Standard"
          variant="standard"
        />
      </div>
    </>
  )
}

Helper text#

Add a helper text in addition to the label if you want to show more information below the input field.

Edit on GitHub

Remember, contributions to this topic should follow our Community Guidelines.

  • React TypeScript
'use client';

import { FloatingLabel } from 'flowbite-react';

export default function FloatingLabel() {
  return (
    <FloatingLabel
      helperText="Remember, contributions to this topic should follow our Community Guidelines."
      label="Floating Helper"
      variant="filled"
    />
  )
}