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]" placeholder="Select countries" selectionMode="multiple">
<Label>Countries to Visit</Label>
<Select.Trigger>
<Select.Value />
<Select.Indicator />
</Select.Trigger>
<Select.Popover>
<ListBox selectionMode="multiple">
<ListBox.Item id="argentina" textValue="Argentina">
Argentina
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="venezuela" textValue="Venezuela">
Venezuela
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="japan" textValue="Japan">
Japan
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="france" textValue="France">
France
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="italy" textValue="Italy">
Italy
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="spain" textValue="Spain">
Spain
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="thailand" textValue="Thailand">
Thailand
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="new-zealand" textValue="New Zealand">
New Zealand
<ListBox.ItemIndicator />
</ListBox.Item>
<ListBox.Item id="iceland" textValue="Iceland">
Iceland
<ListBox.ItemIndicator />
</ListBox.Item>
</ListBox>
</Select.Popover>
</Select>
)
}