Select

Select displays a collapsible list of options and allows a user to select one of them.

<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>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/select

Usage

Use 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>

Composition

Select is built on top of primitive components that you can use directly for full customization:

SelectTrigger → wraps Button
SelectContent → wraps Popover + ListBox
SelectItem → re-exports ListBoxItem

When 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:

Use any Button variant or custom trigger
Control Popover placement and behavior
Add sections, headers, and custom ListBoxItem content
Reuse the same primitives across Select, Combobox, Menu, etc.

Playground

Use the controls below to experiment with different select props and see the live preview and code update.

Country

label

placeholder

isDisabled

isInvalid

<Select placeholder="Select a country">
  <Label>Country</Label>
  <SelectTrigger />
  <SelectContent>
    <ListBoxItem id="us">United States</ListBoxItem>
    <ListBoxItem id="uk">United Kingdom</ListBoxItem>
    <ListBoxItem id="fr">France</ListBoxItem>
    <ListBoxItem id="de">Germany</ListBoxItem>
    <ListBoxItem id="jp">Japan</ListBoxItem>
  </SelectContent>
</Select>

Examples

Provider

ProviderPlease select a provider.

ProviderPlease select an item in the list.

Model

Project

Provider

Selected provider: eleven-labs

API Reference

Select

A select displays a collapsible list of options and allows a user to select one of them.

Prop	Type	Default
	`boolean`	`—`
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`string`	`'Select an item' (localized)`
	`DOMRenderFunction<"div", SelectRenderProps>`	`—`

	`M`	`'single'`
	`Key \| null`	`—`
	`Key \| null`	`—`
	`function`	`—`
	`Iterable<Key>`	`—`

	`ValueType<M>`	`—`
	`ValueType<M>`	`—`
	`function`	`—`

SelectContent

Missing description.

Prop	Type	Default
	`Placement`	`'bottom'`
	`boolean`	`—`
	`DragAndDropHooks<NoInfer<T>>`	`—`
	`"grid" \| "stack"`	`'stack'`
	`Orientation`	`'vertical'`
	`DOMRenderFunction<"div", ListBoxRenderProps>`	`—`

	`ReactNode \| function`	`—`
	`Iterable<T>`	`—`
	`ReactNode \| function`	`—`
	`readonly any[]`	`—`

	`SelectionMode`	`—`
	`SelectionBehavior`	`"toggle"`
	`Iterable<Key> \| "all"`	`—`
	`Iterable<Key> \| "all"`	`—`
	`function`	`—`
	`Iterable<Key>`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`"clearSelection" \| "none"`	`'clearSelection'`

Last updated on 5/22/2026