Select

uistable

Select — extracted 1:1 from WEM-App.

npx shadcn add @krawma/select

npm: lucide-react@^1.22.0, radix-ui@^1.6.1 · registry: @krawma/utils

Preview

States

opencloseddisabledfocus-visible

Keyboard

EnterSpaceArrowUpArrowDownEscapeHomeEnd

Depends on

utils

Purpose

A dropdown for choosing one option from a defined list. For a searchable/filterable list use combobox; for a few always-visible options use radio-group; for native mobile behavior use native-select.

Anatomy

Select › SelectTrigger (shows SelectValue) › SelectContent (SelectGroup, SelectLabel, SelectItem, SelectSeparator, scroll buttons).

Style

No variants — token-backed trigger matching input height, and a portalled popup surface. The trigger width drives the popup width.

Behavior & functionality

Controlled (value + onValueChange) or uncontrolled (defaultValue). Opens a listbox; selecting an item closes it and updates the trigger.

Accessibility

Trigger exposes a combobox/listbox pattern; Enter/Space opens, arrows move, Enter selects, Escape closes, Home/End jump.
Give the trigger an accessible name (a Label or aria-label); provide a placeholder via SelectValue.
Honor disabled and visible focus-visible.

Do / Don't

✅ Use SelectGroup + SelectLabel to organize long lists.
❌ Don't use for free-text or filterable choices — use combobox.