# Select

Displays a list of options for the user to pick from—triggered by a button.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



Basic usage of the Monolith Select.



<ComponentPreview name="select-demo">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Theme" />
      </SelectTrigger>

      <SelectContent>
        <SelectItem value="light">
          Light
        </SelectItem>

        <SelectItem value="dark">
          Dark
        </SelectItem>

        <SelectItem value="system">
          System
        </SelectItem>
      </SelectContent>
    </Select>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/select.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

```tsx
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
```

```tsx
<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>
```

## Examples [#examples]

### Grouped Options [#grouped-options]

<ComponentPreview name="select-grouped">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a timezone" />
      </SelectTrigger>

      <SelectContent>
        <SelectGroup>
          <SelectLabel>
            North America
          </SelectLabel>

          <SelectItem value="est">
            Eastern Standard Time (EST)
          </SelectItem>

          <SelectItem value="cst">
            Central Standard Time (CST)
          </SelectItem>

          <SelectItem value="mst">
            Mountain Standard Time (MST)
          </SelectItem>

          <SelectItem value="pst">
            Pacific Standard Time (PST)
          </SelectItem>
        </SelectGroup>

        <SelectSeparator />

        <SelectGroup>
          <SelectLabel>
            Europe
          </SelectLabel>

          <SelectItem value="gmt">
            Greenwich Mean Time (GMT)
          </SelectItem>

          <SelectItem value="cet">
            Central European Time (CET)
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </div>
</ComponentPreview>

### With Label [#with-label]

<ComponentPreview name="select-with-label">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <div className="grid w-[180px] items-center gap-1.5">
      <Label htmlFor="framework">
        Framework
      </Label>

      <Select>
        <SelectTrigger id="framework">
          <SelectValue placeholder="Select" />
        </SelectTrigger>

        <SelectContent>
          <SelectItem value="next">
            Next.js
          </SelectItem>

          <SelectItem value="sveltekit">
            SvelteKit
          </SelectItem>

          <SelectItem value="astro">
            Astro
          </SelectItem>

          <SelectItem value="nuxt">
            Nuxt.js
          </SelectItem>
        </SelectContent>
      </Select>
    </div>
  </div>
</ComponentPreview>

### Disabled [#disabled]

<ComponentPreview name="select-disabled">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Disabled" />
      </SelectTrigger>

      <SelectContent>
        <SelectItem value="1">
          Option 1
        </SelectItem>

        <SelectItem value="2">
          Option 2
        </SelectItem>
      </SelectContent>
    </Select>
  </div>
</ComponentPreview>

### Error State [#error-state]

<ComponentPreview name="select-error">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <div className="grid w-[180px] items-center gap-1.5">
      <Label htmlFor="theme-error" className="text-semantic-danger">
        Theme
      </Label>

      <Select>
        <SelectTrigger id="theme-error" aria-invalid="true">
          <SelectValue placeholder="Select" />
        </SelectTrigger>

        <SelectContent>
          <SelectItem value="light">
            Light
          </SelectItem>

          <SelectItem value="dark">
            Dark
          </SelectItem>

          <SelectItem value="system">
            System
          </SelectItem>
        </SelectContent>
      </Select>

      <p className="text-sm text-semantic-danger">
        Please select a theme.
      </p>
    </div>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Select` component extends the Radix UI Select primitive and supports the following props:

| Prop            | Type                      | Description                                                      |
| --------------- | ------------------------- | ---------------------------------------------------------------- |
| `value`         | `string`                  | The controlled value of the select.                              |
| `defaultValue`  | `string`                  | The default value when initially rendered.                       |
| `onValueChange` | `(value: string) => void` | Event handler called when the value changes.                     |
| `disabled`      | `boolean`                 | When `true`, prevents the user from interacting with the select. |
| `aria-invalid`  | `boolean`                 | Applies the error state styling to the `SelectTrigger`.          |