Avala Design
← Components/primitives

Select

Carbon-spec form-control select. Wraps Radix Select for ARIA and keyboard. Carbon's surrounding label / helper-text / state structure applied via a top-level wrapper component.

primitivesstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Select, SelectContent, SelectGroup, SelectItem } from "@avala/design";

<Select>
  <SelectContent />
  <SelectGroup />
  <SelectItem />
</Select>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-select--defaultOpen in Storybook →

When to use

  • Single-choice form input with > 7 options where inline radios stop scaling.
  • Form rows that want Carbon's label / helper / error scaffolding ("Country", "Project").

When not to use

  • Free-text or filterable lists → use the ComboBox pattern.
  • Multi-select → use the MultiSelect pattern.
  • Action menus (logout / settings) → use `DropdownMenu`. ARIA semantics differ.
  • Tab-style content switching → use `Tabs`.