Select

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

On this page

Country

Props

label

placeholder

isDisabled

isInvalid

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

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.

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

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

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

SelectValue

SelectValue renders the current value of a Select, or a placeholder if no value is selected. It is usually placed within the button element.

Prop	Type	Default
	`ReactNode \| function`	`—`

SelectContent

Contains the list of options, displayed in a popover when the select is open.

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

	`ReactNode \| function`	`—`
	`Iterable<T>`	`—`
	`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 6/16/2026