Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-select"use client"
import { Label, ListBox, Select } from "@/components/ui/heroui-select"
export default function Variants() {
return (
<div className="flex min-h-[360px] w-full items-center justify-center p-8">
<div className="flex flex-col gap-4">
<Select className="w-[256px]" placeholder="Select one" variant="primary">
<Label>Primary variant</Label>
<Select.Trigger>
<Select.Value />
<Select.Indicator />
</Select.Trigger>
<Select.Popover>
<ListBox>
<ListBox.Item id="option1" textValue="Option 1">
Option 1
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="option2" textValue="Option 2">
Option 2
<ListBox.ItemIndicator />
</ListBox.Item>
</ListBox>
</Select.Popover>
</Select>
<Select className="w-[256px]" placeholder="Select one" variant="secondary">
<Label>Secondary variant</Label>
<Select.Trigger>
<Select.Value />
<Select.Indicator />
</Select.Trigger>
<Select.Popover>
<ListBox>
<ListBox.Item id="option1" textValue="Option 1">
Option 1
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="option2" textValue="Option 2">
Option 2
<ListBox.ItemIndicator />
</ListBox.Item>
</ListBox>
</Select.Popover>
</Select>
</div>
</div>
)
}