Component

Select

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

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/select

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>

Variants & States

Supported variants, sizes, and interaction states for this component.

States

Placeholder
With value
Disabled