<Select
aria-label={trimmedLabel ? undefined : "Provider"}
placeholder={trimmedPlaceholder || undefined}
isDisabled={isDisabled}
>
{trimmedLabel ? <Label>{trimmedLabel}</Label> : null}
<SelectTrigger />
<SelectContent
selectionMode={selectionMode === "multiple" ? "multiple" : undefined}
>
<SelectItem id="perplexity">Perplexity</SelectItem>
<SelectItem id="replicate">Replicate</SelectItem>
<SelectItem id="together-ai">Together AI</SelectItem>
<SelectItem id="eleven-labs">ElevenLabs</SelectItem>
</SelectContent>
</Select>pnpm dlx shadcn@latest add @dotui/selectUse Select to allow users to choose a single option from a collapsible list of options when space is limited.
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";<Select>
<SelectTrigger />
<SelectContent>
<SelectItem>Option 1</SelectItem>
<SelectItem>Option 2</SelectItem>
</SelectContent>
</Select>Select is built on top of primitive components that you can use directly for full customization:
SelectTrigger → wraps ButtonSelectContent → wraps Popover + ListBoxSelectItem → re-exports ListBoxItemWhen you need more control, you can compose the primitives directly:
import { Select, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Popover } from "@/components/ui/popover";
import { ListBox, ListBoxItem, ListBoxSection, ListBoxSectionHeader } from "@/components/ui/list-box";<Select>
<Button variant="outline">
<SelectValue placeholder="Select provider" />
<ChevronDownIcon />
</Button>
<Popover placement="bottom-start">
<ListBox>
<ListBoxSection>
<ListBoxSectionHeader>AI Providers</ListBoxSectionHeader>
<ListBoxItem id="openai">OpenAI</ListBoxItem>
<ListBoxItem id="anthropic">Anthropic</ListBoxItem>
</ListBoxSection>
</ListBox>
</Popover>
</Select>This approach lets you:
Button variant or custom triggerPopover placement and behaviorListBoxItem contentSelect, Combobox, Menu, etc.Use the controls below to experiment with different select props and see the live preview and code update.
A select displays a collapsible list of options and allows a user to select one of them.
| Prop | Type | Default | |
|---|---|---|---|
| | ||
| — | ||
| — | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
| | ||
| — | ||
| — | ||
| — | ||
| | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Unknown placeholder="Select a country">
<Dynamic(Label)>Country</Dynamic(Label)>
<Dynamic(SelectTrigger) />
<Unknown>
<Unknown id="us">United States</Unknown>
<Unknown id="uk">United Kingdom</Unknown>
<Unknown id="fr">France</Unknown>
<Unknown id="de">Germany</Unknown>
<Unknown id="jp">Japan</Unknown>
</Unknown>
</Unknown>