Select

A dropdown select. Built on Radix Select with groups, labels, and search.

Import

import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
  SelectGroup,
  SelectLabel,
} from '@aspect/react';

Usage

<Select>
  <SelectTrigger aria-label="Region">
    <SelectValue placeholder="Choose region" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Americas</SelectLabel>
      <SelectItem value="us-east">US East</SelectItem>
      <SelectItem value="us-west">US West</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Compound components

| Part | Purpose | | --------------- | -------------------------------------- | | Select | Root state container | | SelectTrigger | The button that opens the dropdown | | SelectValue | Displays selected value or placeholder | | SelectContent | The dropdown panel | | SelectItem | An option | | SelectGroup | Groups options with a label | | SelectLabel | Group heading |

Guidelines

Do:

• Always provide an aria-label on the trigger
• Use groups for long option lists

Don't:

• Don't use Select for fewer than 3 options — use Radio instead