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 { Header, Label, ListBox, Select, Separator } from "@/components/ui/heroui-select"
export default function Demo() {
return (
<Select className="w-[256px]" placeholder="Select a country">
<Label>Country</Label>
<Select.Trigger>
<Select.Value />
<Select.Indicator />
</Select.Trigger>
<Select.Popover>
<ListBox>
<ListBox.Section>
<Header>North America</Header>
<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.Section>
<Separator />
<ListBox.Section>
<Header>Europe</Header>
<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.Item id="spain" textValue="Spain">
Spain
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="italy" textValue="Italy">
Italy
<ListBox.ItemIndicator />
</ListBox.Item>
</ListBox.Section>
<Separator />
<ListBox.Section>
<Header>Asia</Header>
<ListBox.Item id="japan" textValue="Japan">
Japan
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="china" textValue="China">
China
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="india" textValue="India">
India
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="south-korea" textValue="South Korea">
South Korea
<ListBox.ItemIndicator />
</ListBox.Item>
</ListBox.Section>
</ListBox>
</Select.Popover>
</Select>
)
}