[ [UI.05] Components ] Select

Select

> A dropdown select component for choosing from a list of options.

Import

[ [0x5B] IMPORT ]

1import {
2  Select,
3  SelectContent,
4  SelectItem,
5  SelectTrigger,
6  SelectValue,
7} from "@/components/ui/select"

Preview

[ [0x00] SELECT ]

1<Select>
2  <SelectTrigger className="w-[200px]">
3    <SelectValue placeholder="Select a fruit" />
4  </SelectTrigger>
5  <SelectContent>
6    <SelectItem value="apple">Apple</SelectItem>
7    <SelectItem value="banana">Banana</SelectItem>
8    <SelectItem value="orange">Orange</SelectItem>
9  </SelectContent>
10</Select>

Variants

[ [0x00] WITH LABEL ]

[FRAMEWORK]:

1<div className="grid gap-2">
2  <Label htmlFor="framework">[FRAMEWORK]:</Label>
3  <Select>
4    <SelectTrigger id="framework" className="w-[200px]">
5      <SelectValue placeholder="Select framework" />
6    </SelectTrigger>
7    <SelectContent>
8      <SelectItem value="next">Next.js</SelectItem>
9      <SelectItem value="remix">Remix</SelectItem>
10      <SelectItem value="astro">Astro</SelectItem>
11    </SelectContent>
12  </Select>
13</div>

[ [0x00] WITH GROUPS ]

1<Select>
2  <SelectTrigger className="w-[200px]">
3    <SelectValue placeholder="Select timezone" />
4  </SelectTrigger>
5  <SelectContent>
6    <SelectGroup>
7      <SelectLabel>North America</SelectLabel>
8      <SelectItem value="est">Eastern Time</SelectItem>
9      <SelectItem value="cst">Central Time</SelectItem>
10      <SelectItem value="pst">Pacific Time</SelectItem>
11    </SelectGroup>
12    <SelectGroup>
13      <SelectLabel>Europe</SelectLabel>
14      <SelectItem value="gmt">GMT</SelectItem>
15      <SelectItem value="cet">Central European</SelectItem>
16    </SelectGroup>
17  </SelectContent>
18</Select>

[ [0x00] DISABLED ]

1<Select disabled>
2  <SelectTrigger className="w-[200px]">
3    <SelectValue placeholder="Disabled" />
4  </SelectTrigger>
5  <SelectContent>
6    <SelectItem value="1">Option 1</SelectItem>
7  </SelectContent>
8</Select>

[ [0x00] WITH DISABLED ITEM ]

1<Select>
2  <SelectTrigger className="w-[200px]">
3    <SelectValue placeholder="Select role" />
4  </SelectTrigger>
5  <SelectContent>
6    <SelectItem value="admin">Admin</SelectItem>
7    <SelectItem value="member">Member</SelectItem>
8    <SelectItem value="owner" disabled>Owner (Unavailable)</SelectItem>
9  </SelectContent>
10</Select>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
defaultValue	`string`	-	The value of the select when initially rendered.
value	`string`	-	Controlled value of the select.
onValueChange	`(value: string) => void`	-	Event handler called when the value changes.
disabled	`boolean`	`false`	Disable the select.
placeholder	`string`	-	Placeholder text shown when no value is selected.

Accessibility

[ [0x58] A11Y ]

Built on Radix UI Select primitive for full accessibility
Keyboard navigation with Arrow keys, Enter, and Escape
Type-ahead search to jump to options
Screen reader announcements for selection changes

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Select when:

• Choosing one option from a list of 5+ items (country, timezone, category)
• Options are mutually exclusive (only one can be selected)
• Space is limited and you need a compact dropdown
• Users are familiar with the options (don't need to see all at once)
• Grouping related options with labels (time zones by region)

✗ Don't use when:

• Less than 5 options (use Radio Group for visibility)
• Multiple selections needed (use Checkbox group or multi-select)
• Options need search/filter (use Combobox with search)
• Binary choice (use Switch or two Radio buttons)
• Users need to see all options immediately (use visible list)

Best Practices:

• Use SelectGroup + SelectLabel to organize long lists
• Provide clear placeholder text (e.g., "Select country...")
• Set appropriate width based on longest option
• Disable unavailable options rather than hiding them
• Order options logically (alphabetically, by popularity, or by region)