║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Select description: A customizable select component for choosing from a list of options. links: doc: https://base-ui.com/react/components/select api: https://base-ui.com/react/components/select#api-reference

<ComponentPreview name="select-demo" />

Installation

<InstallationTabs> <InstallationTabsList> <InstallationTabsTrigger value="cli">CLI</InstallationTabsTrigger> <InstallationTabsTrigger value="manual">Manual</InstallationTabsTrigger> </InstallationTabsList> <InstallationTabsContent value="cli"> <CodeBlockTabs> <CodeBlockTabsList> <CodeBlockTabsTrigger value="npm">npm</CodeBlockTabsTrigger> <CodeBlockTabsTrigger value="pnpm">pnpm</CodeBlockTabsTrigger> </CodeBlockTabsList> <CodeBlockTab value="npm">

npx shadcn@latest add @roiui/select

npx shadcn@latest add @roiui/select-tailwind

</CodeBlockTab> <CodeBlockTab value="pnpm">

pnpm dlx shadcn@latest add @roiui/select

pnpm dlx shadcn@latest add @roiui/select-tailwind

</CodeBlockTab> </CodeBlockTabs> </InstallationTabsContent> <InstallationTabsContent value="manual" data-manual="true">

Copy and paste the following files:

<ComponentSource name="select" />

</InstallationTabsContent> </InstallationTabs>

Anatomy

<CodeBlock filename="anatomy" language="tsx" code={<Select> <SelectTrigger> <SelectValue /> <SelectIcon /> </SelectTrigger> <SelectPortal> <SelectOverlay /> <SelectPositioner> <SelectScrollUpArrow /> <SelectPopup> <SelectArrow /> <SelectList> <SelectItem> <SelectItemText /> <SelectItemIndicator /> </SelectItem> <SelectSeparator /> <SelectGroup> <SelectGroupLabel /> <SelectItem> <SelectItemText /> <SelectItemIndicator /> </SelectItem> </SelectGroup> </SelectList> </SelectPopup> <SelectScrollDownArrow /> </SelectPositioner> </SelectPortal> </Select> } />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║