# Select

> Dropdown selection with keyboard support.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/select.json`

## Install

```tsx
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@aspyn-io/kit";
```

### Basic

```tsx
<Select>
  <SelectTrigger className="w-56">
    <SelectValue placeholder="Select a region" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="us-east">US East</SelectItem>
    <SelectItem value="us-west">US West</SelectItem>
    <SelectItem value="eu-central">EU Central</SelectItem>
  </SelectContent>
</Select>
```

### Grouped options with a label

```tsx
<div className="space-y-2">
  <Label htmlFor="env">Environment</Label>
  <Select defaultValue="production">
    <SelectTrigger id="env" className="w-56">
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>Deployed</SelectLabel>
        <SelectItem value="production">Production</SelectItem>
        <SelectItem value="staging">Staging</SelectItem>
      </SelectGroup>
      <SelectGroup>
        <SelectLabel>Local</SelectLabel>
        <SelectItem value="development">Development</SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</div>
```

### Scrollable

Long lists scroll inside the content with chevron scroll buttons.

```tsx
<Select>
  <SelectTrigger className="w-56">
    <SelectValue placeholder="Select a timezone" />
  </SelectTrigger>
  <SelectContent>
    {timezones.map((tz) => (
      <SelectItem key={tz} value={tz}>
        {tz}
      </SelectItem>
    ))}
  </SelectContent>
</Select>
```

### Disabled

```tsx
<Select disabled defaultValue="production">
  <SelectTrigger className="w-56">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="production">Production</SelectItem>
  </SelectContent>
</Select>
```

## Notes

- Controlled usage: value + onValueChange. Values are strings: map to your API enums (snake_case).
- Give SelectTrigger an id and pair it with Label, or use aria-label when there is no visible label.