Select

A styled native select for choosing one option from a list.

Default

tsx

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

export default function SelectDefault() {
  return (
    <Select defaultValue="">
      <option value="" disabled>
        Choose a plan
      </option>
      <option value="free">Free</option>
      <option value="pro">Pro</option>
      <option value="team">Team</option>
    </Select>
  );
}

Variants

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

tsx

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

export default function SelectVariants() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <Select variant="outline" defaultValue="pro">
        <option value="free">Free</option>
        <option value="pro">Pro</option>
        <option value="team">Team</option>
      </Select>
      <Select variant="fill" defaultValue="pro">
        <option value="free">Free</option>
        <option value="pro">Pro</option>
        <option value="team">Team</option>
      </Select>
    </div>
  );
}

Sizes

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

tsx

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

export default function SelectSizes() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <Select size="sm" defaultValue="pro">
        <option value="free">Free</option>
        <option value="pro">Pro</option>
        <option value="team">Team</option>
      </Select>
      <Select size="md" defaultValue="pro">
        <option value="free">Free</option>
        <option value="pro">Pro</option>
        <option value="team">Team</option>
      </Select>
      <Select size="lg" defaultValue="pro">
        <option value="free">Free</option>
        <option value="pro">Pro</option>
        <option value="team">Team</option>
      </Select>
    </div>
  );
}

Colors

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

tsx

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

export default function SelectColors() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <Select color="secondary" defaultValue="pro">
        <option value="free">Secondary</option>
        <option value="pro">Pro</option>
      </Select>
      <Select color="info" defaultValue="pro">
        <option value="free">Info</option>
        <option value="pro">Pro</option>
      </Select>
      <Select color="success" defaultValue="pro">
        <option value="free">Success</option>
        <option value="pro">Pro</option>
      </Select>
      <Select color="warning" defaultValue="pro">
        <option value="free">Warning</option>
        <option value="pro">Pro</option>
      </Select>
    </div>
  );
}

Validation state

The state prop marks the select valid or invalid, and pairs with a Field.Text of the matching variant. The invalid state also sets aria-invalid.

Looks good.

Select a plan to continue.

tsx

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

export default function SelectValidation() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <Field>
        <Select state="valid" defaultValue="pro">
          <option value="free">Free</option>
          <option value="pro">Pro</option>
        </Select>
        <Field.Text variant="valid">Looks good.</Field.Text>
      </Field>
      <Field>
        <Select state="invalid" defaultValue="">
          <option value="" disabled>
            Choose a plan
          </option>
          <option value="pro">Pro</option>
        </Select>
        <Field.Text variant="invalid">Select a plan to continue.</Field.Text>
      </Field>
    </div>
  );
}

Disabled

tsx

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

export default function SelectDisabled() {
  return (
    <Select defaultValue="pro" disabled>
      <option value="free">Free</option>
      <option value="pro">Pro</option>
      <option value="team">Team</option>
    </Select>
  );
}

API Reference

Select

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

Styling

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

See the full list of available select classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousInput NextCheckbox