Component

Select

Dropdown for choosing one value from a list. Use when options exceed 5 items.

Usage

Use Select when you have more than 5 options. For fewer choices, consider radio buttons.

Playground

Preview

Select an option

Configure

Show label

Yes

Label

Placeholder

Option 1

Option 2

Option 3

Disabled

Code

<div className="grid w-full max-w-sm gap-1.5">
  <Label htmlFor="select">Select an option</Label>
  <Select>
    <SelectTrigger id="select">
      <SelectValue placeholder="Choose…" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="option1">Option 1</SelectItem>
      <SelectItem value="option2">Option 2</SelectItem>
      <SelectItem value="option3">Option 3</SelectItem>
    </SelectContent>
  </Select>
</div>