<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>npx 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.
<Select placeholder="Select a country">
<Label>Country</Label>
<SelectTrigger />
<SelectContent>
<SelectItem id="us">United States</SelectItem>
<SelectItem id="uk">United Kingdom</SelectItem>
<SelectItem id="fr">France</SelectItem>
<SelectItem id="de">Germany</SelectItem>
<SelectItem id="jp">Japan</SelectItem>
</SelectContent>
</Select>A select displays a collapsible list of options and allows a user to select one of them.
| Prop | Type | Default | |
|---|---|---|---|
string | 'Select an item' (localized) | ||
boolean | — | ||
ReactNode | function | — | ||
"single" | 'single' | ||
Key | null | — | ||
Key | — | ||
function | — | ||
Iterable<Key> | — | ||
Key | null | — | ||
Key | null | — | ||
function | — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
Placement | 'bottom' | ||
boolean | — | ||
boolean | — | ||
DragAndDropHooks<NoInfer<T>> | — | ||
"grid" | "stack" | 'stack' | ||
Orientation | 'vertical' | ||
ReactNode | function | — | ||
Iterable<T> | — | ||
ReactNode | function | — | ||
readonly any[] | — | ||
SelectionMode | — | ||
SelectionBehavior | "toggle" | ||
Iterable<Key> | "all" | — | ||
Iterable<Key> | "all" | — | ||
function | — | ||
Iterable<Key> | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
"none" | "clearSelection" | 'clearSelection' | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.