Components
Loading preview...
A collapsible dropdown that lets users pick one or multiple options from a list.
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 Demo() {
return (
<Select className="w-[256px]" disabledKeys={["cat", "kangaroo"]} placeholder="Select an animal">
<Label>Animal</Label>
<Select.Trigger>
<Select.Value />
<Select.Indicator />
</Select.Trigger>
<Select.Popover>
<ListBox>
<ListBox.Item id="dog" textValue="Dog">
Dog
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="cat" textValue="Cat">
Cat
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="bird" textValue="Bird">
Bird
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="kangaroo" textValue="Kangaroo">
Kangaroo
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="elephant" textValue="Elephant">
Elephant
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="tiger" textValue="Tiger">
Tiger
<ListBox.ItemIndicator />
</ListBox.Item>
</ListBox>
</Select.Popover>
</Select>
)
}