Floating Label

A label that floats above the control once it is focused or filled.

Default

Use FloatingLabel to display a label that floats on focus or when the control has a value.

tsx

import { FloatingLabel, FormControl } from "@hummingbirdui/react";

export default function FloatingLabelDefault() {
  return (
    <FloatingLabel htmlFor="fl-email" label="Email address">
      <FormControl id="fl-email" type="email" />
    </FloatingLabel>
  );
}

Textarea

Floating labels work with a Textarea.

tsx

import { FloatingLabel, Textarea } from "@hummingbirdui/react";

export default function FloatingLabelTextarea() {
  return (
    <FloatingLabel htmlFor="fl-bio" label="Bio">
      <Textarea id="fl-bio" className="h-28" />
    </FloatingLabel>
  );
}

Select

Floating labels work with a Select.

tsx

import { FloatingLabel, Select } from "@hummingbirdui/react";

export default function FloatingLabelSelect() {
  return (
    <FloatingLabel htmlFor="fl-plan" label="Plan">
      <Select id="fl-plan" defaultValue="pro">
        <option value="free">Free</option>
        <option value="pro">Pro</option>
        <option value="team">Team</option>
      </Select>
    </FloatingLabel>
  );
}

API Reference

FloatingLabel

PropTypeDefaultDescription
labelReact.ReactNode—The floating label text.
htmlForstring—Links the label to the control; should match the control's id.
classNamestring—Additional classes merged with the generated classes.

Styling

Hummingbird React floating label is styled entirely through Hummingbird's utility classes and CSS variables.

  • See the full list of available floating label classes in the Class overview.
  • Visit the CSS Variables documentation to explore all available variables.
PreviousInput GroupNextForm Range