Aspyn

Select

Dropdown selection with keyboard support.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@aspyn-io/kit";

Basic

<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

<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>

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.