Input

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

Default

tsx

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

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

Variants

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

tsx

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

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

Sizes

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

tsx

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

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

Colors

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

tsx

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

export default function InputColors() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <Input color="primary" placeholder="Primary" />
      <Input color="secondary" placeholder="Secondary" />
      <Input color="info" placeholder="Info" />
      <Input color="success" placeholder="Success" />
      <Input 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 { Field, Input } from "@hummingbirdui/react";

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

Textarea

Use Textarea for multi-line text input.

tsx

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

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

With label

Use Field to combine a Field.Label, Input, and Field.Text into a single form field.

Email address

Notifications are sent to this address.

tsx

import { Field, Input } from "@hummingbirdui/react";

export default function InputWithLabel() {
  return (
    <Field>
      <Field.Label htmlFor="email">Email address</Field.Label>
      <Input id="email" type="email" placeholder="you@example.com" />
      <Field.Text>Notifications are sent to this address.</Field.Text>
    </Field>
  );
}

With icon

InputIcon adds InputIcon.Start and/or InputIcon.End to an input while automatically adjusting the input padding.

tsx

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

export default function InputWithIcon() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <InputIcon>
        <InputIcon.Start>
          <Search className="size-4" />
        </InputIcon.Start>
        <Input placeholder="Search" />
      </InputIcon>
      <InputIcon>
        <Input placeholder="Username" defaultValue="jane" />
        <InputIcon.End>
          <Check className="size-4" />
        </InputIcon.End>
      </InputIcon>
    </div>
  );
}

Disabled

tsx

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

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

API Reference

Input

Prop	Type	Default
`variant`	`"outline" \| "fill"`	`"outline"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`color`	`"primary" \| "secondary" \| "info" \| "success" \| "warning"`	—
`state`	`"valid" \| "invalid"`	—
`className`	`string`	—

Textarea

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

Field.Text

Prop	Type	Default
`variant`	`"default" \| "valid" \| "invalid"`	`"default"`
`className`	`string`	—

Field, Field.Label, InputIcon, InputIcon.Start, and InputIcon.End are layout wrappers. Each accepts className.

Styling

Hummingbird React input 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.

PreviousText NextSelect