Form Control

Text inputs, textareas, labels, and helper text for building forms.

Default

tsx

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

export default function FormControlDefault() {
  return <FormControl type="email" placeholder="you@example.com" />;
}

Variants

The variant prop switches between outline (default, bordered) and fill (a filled, muted surface).

tsx

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

export default function FormControlVariants() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <FormControl variant="outline" placeholder="Outline" />
      <FormControl variant="fill" placeholder="Fill" />
    </div>
  );
}

Sizes

The size prop offers three sizes: sm, md (default), and lg.

tsx

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

export default function FormControlSizes() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <FormControl size="sm" placeholder="Small" />
      <FormControl size="md" placeholder="Medium" />
      <FormControl size="lg" placeholder="Large" />
    </div>
  );
}

Colors

The color prop sets the focus accent: primary, secondary, info, success, or warning.

tsx

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

export default function FormControlColors() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <FormControl color="primary" placeholder="Primary" />
      <FormControl color="secondary" placeholder="Secondary" />
      <FormControl color="info" placeholder="Info" />
      <FormControl color="success" placeholder="Success" />
      <FormControl color="warning" placeholder="Warning" />
    </div>
  );
}

Validation state

Use the state prop to indicate the validation state of the input.

Looks good.

Enter a valid email address.

tsx

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

export default function FormControlValidation() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <FormField>
        <FormControl state="valid" defaultValue="jane@example.com" />
        <FormText variant="valid">Looks good.</FormText>
      </FormField>
      <FormField>
        <FormControl state="invalid" defaultValue="not-an-email" />
        <FormText variant="invalid">Enter a valid email address.</FormText>
      </FormField>
    </div>
  );
}

Textarea

Use Textarea for multi-line text input.

tsx

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

export default function FormControlTextarea() {
  return <Textarea rows={4} placeholder="Leave a comment" />;
}

With label

Use FormField to combine a FormLabel, FormControl, and FormText into a single form field.

Notifications are sent to this address.

tsx

import {
  FormField,
  FormLabel,
  FormControl,
  FormText,
} from "@hummingbirdui/react";

export default function FormControlWithLabel() {
  return (
    <FormField>
      <FormLabel htmlFor="email">Email address</FormLabel>
      <FormControl id="email" type="email" placeholder="you@example.com" />
      <FormText>Notifications are sent to this address.</FormText>
    </FormField>
  );
}

With icon

InputIcon adds InputIconStart and/or InputIconEnd to an input while automatically adjusting the input padding.

tsx

import {
  InputIcon,
  InputIconStart,
  InputIconEnd,
  FormControl,
} from "@hummingbirdui/react";
import { Search, Check } from "lucide-react";

export default function FormControlWithIcon() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <InputIcon>
        <InputIconStart>
          <Search className="size-4" />
        </InputIconStart>
        <FormControl placeholder="Search" />
      </InputIcon>
      <InputIcon>
        <FormControl placeholder="Username" defaultValue="jane" />
        <InputIconEnd>
          <Check className="size-4" />
        </InputIconEnd>
      </InputIcon>
    </div>
  );
}

Disabled

tsx

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

export default function FormControlDisabled() {
  return (
    <FormControl
      placeholder="Disabled"
      defaultValue="Read only value"
      disabled
    />
  );
}

API Reference

FormControl

PropTypeDefaultDescription
variant"outline" | "fill""outline"Visual style of the control.
size"sm" | "md" | "lg""md"Size of the control.
color"primary" | "secondary" | "info" | "success" | "warning"—Focus accent color.
state"valid" | "invalid"—Validation state; invalid also sets aria-invalid.
asChildbooleanfalseRender as a child element instead of the default.
classNamestring—Additional classes merged with the generated classes.

Textarea

Accepts the same variant, size, color, state, asChild, and className props as FormControl.

FormText

PropTypeDefaultDescription
variant"default" | "valid" | "invalid""default"Helper text style, matching the control's validation state.
asChildbooleanfalseRender as a child element instead of the default.
classNamestring—Additional classes merged with the generated classes.

FormField, FormLabel, InputIcon, InputIconStart, and InputIconEnd are layout wrappers. Each accepts asChild and className.

Styling

Hummingbird React form control is styled entirely through Hummingbird's utility classes and CSS variables.

  • See the full list of available form control classes in the Class overview.
  • Visit the CSS Variables documentation to explore all available variables.
PreviousInstallationNextSelect