Select

Form

Lets users pick one option from a collapsible list.

npx shadcn@latest add select

Default

Preview

Live

tsx

1<Select defaultValue="feature">
2  <SelectTrigger className="w-56">
3    <SelectValue placeholder="Pick a plan" />
4  </SelectTrigger>
5  <SelectContent>
6    <SelectItem value="starter">Starter</SelectItem>
7    <SelectItem value="pro">Pro</SelectItem>
8    <SelectItem value="team">Team</SelectItem>
9    <SelectItem value="enterprise" disabled>Enterprise</SelectItem>
10  </SelectContent>
11</Select>

With placeholder

Omit defaultValue to show a placeholder until a choice is made.

Preview

Live

tsx

1<Select>
2  <SelectTrigger className="w-56">
3    <SelectValue placeholder="Select a region…" />
4  </SelectTrigger>
5  <SelectContent>
6    <SelectItem value="us">United States</SelectItem>
7    <SelectItem value="eu">Europe</SelectItem>
8    <SelectItem value="apac">Asia Pacific</SelectItem>
9  </SelectContent>
10</Select>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description