Select

Atomshadcn/ui, restyled with tokens

Chooses one option from a list too long to show at once.

components/atoms/select.tsx — Select, SelectTrigger, SelectValue, SelectContent, SelectItem…

Use it for: Six or more options, or a list that would crowd the form.
Not for: A few options worth comparing side by side (RadioGroup).

States

PlaceholderOpen it

Chosen

Focused

Invalid

Disabled

Usage

import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/atoms/select';

<Select value={team} onValueChange={setTeam}>
  <SelectTrigger aria-label="Team">
    <SelectValue placeholder="Pick a team" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="design">Design</SelectItem>
    <SelectItem value="engineering">Engineering</SelectItem>
  </SelectContent>
</Select>

Props

Select props
Prop	Type	Default	Description
value / defaultValue	string	—	The chosen item, controlled or uncontrolled.
onValueChange	(value: string) => void	—	Called when an item is picked.
disabled	boolean	false	On Select, or on one SelectItem.
SelectTrigger aria-invalid	boolean	—	The error state.
SelectValue placeholder	ReactNode	—	Shown until something is chosen.
name / required	string / boolean	—	Take part in a native form submission.

Accessibility

The trigger is a combobox; Enter, Space or the arrows open it.
Arrows move through options, typing jumps to one, Escape closes.
Name it with a Label (htmlFor on the trigger id) or aria-label.