HeroUI Select

Forms

About

Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Select to your project and fits it to your theme.

Code

How HeroUI Select is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { Button, FieldError, Form, Label, ListBox, Select, Surface } from "@/components/ui/heroui-select"

export default function OnSurface() {
  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    alert("Form submitted successfully!")
  }

  return (
    <div className="flex min-h-[460px] w-full items-center justify-center p-8">
      <Surface className="w-[320px] rounded-3xl p-6">
        <Form className="flex w-full flex-col gap-4" onSubmit={onSubmit}>
          <Select
            isRequired
            className="w-full"
            name="state"
            placeholder="Select one"
            variant="secondary"
          >
            <Label>State</Label>
            <Select.Trigger>
              <Select.Value />
              <Select.Indicator />
            </Select.Trigger>
            <Select.Popover>
              <ListBox>
                <ListBox.Item id="florida" textValue="Florida">
                  Florida
                  <ListBox.ItemIndicator />
                </ListBox.Item>
                <ListBox.Item id="delaware" textValue="Delaware">
                  Delaware
                  <ListBox.ItemIndicator />
                </ListBox.Item>
                <ListBox.Item id="california" textValue="California">
                  California
                  <ListBox.ItemIndicator />
                </ListBox.Item>
                <ListBox.Item id="texas" textValue="Texas">
                  Texas
                  <ListBox.ItemIndicator />
                </ListBox.Item>
                <ListBox.Item id="new-york" textValue="New York">
                  New York
                  <ListBox.ItemIndicator />
                </ListBox.Item>
                <ListBox.Item id="washington" textValue="Washington">
                  Washington
                  <ListBox.ItemIndicator />
                </ListBox.Item>
              </ListBox>
            </Select.Popover>
            <FieldError />
          </Select>
          <Select
            isRequired
            className="w-full"
            name="country"
            placeholder="Select a country"
            variant="secondary"
          >
            <Label>Country</Label>
            <Select.Trigger>
              <Select.Value />
              <Select.Indicator />
            </Select.Trigger>
            <Select.Popover>
              <ListBox>
                <ListBox.Item id="usa" textValue="United States">
                  United States
                  <ListBox.ItemIndicator />
                </ListBox.Item>
                <ListBox.Item id="canada" textValue="Canada">
                  Canada
                  <ListBox.ItemIndicator />
                </ListBox.Item>
                <ListBox.Item id="mexico" textValue="Mexico">
                  Mexico
                  <ListBox.ItemIndicator />
                </ListBox.Item>
                <ListBox.Item id="uk" textValue="United Kingdom">
                  United Kingdom
                  <ListBox.ItemIndicator />
                </ListBox.Item>
                <ListBox.Item id="france" textValue="France">
                  France
                  <ListBox.ItemIndicator />
                </ListBox.Item>
                <ListBox.Item id="germany" textValue="Germany">
                  Germany
                  <ListBox.ItemIndicator />
                </ListBox.Item>
              </ListBox>
            </Select.Popover>
            <FieldError />
          </Select>
          <Button type="submit">Submit</Button>
        </Form>
      </Surface>
    </div>
  )
}