HeroUI Select

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.

HUby Hero Ui

Install

npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-select

Loading preview...

"use client"

import type { Key } from "@heroui/react"
import { useState } from "react"
import { Description, Label, ListBox, Select } from "@/components/ui/heroui-select"

export default function Controlled() {
  const [value, setValue] = useState<Key | null>("california")

  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-8">
      <Select
        className="w-[256px]"
        placeholder="Select one"
        value={value}
        onChange={(v) => setValue(v as Key | null)}
      >
        <Label>State (controlled)</Label>
        <Select.Trigger>
          <Select.Value />
          <Select.Indicator />
        </Select.Trigger>
        <Description>Selected: {value ? String(value) : "none"}</Description>
        <Select.Popover>
          <ListBox>
            <ListBox.Item id="california" textValue="California">
              <Label>California</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="texas" textValue="Texas">
              <Label>Texas</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="florida" textValue="Florida">
              <Label>Florida</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="new-york" textValue="New York">
              <Label>New York</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="illinois" textValue="Illinois">
              <Label>Illinois</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="pennsylvania" textValue="Pennsylvania">
              <Label>Pennsylvania</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
          </ListBox>
        </Select.Popover>
      </Select>
    </div>
  )
}