Skip to content
Holm Digital logotyp

Select

Displays a list of options for the user to pick from—triggered by a button. Built with Radix UI Primitives for accessible behavior.

Our Select component replaces the standard OS select with a fully styleable version that maintains all accessibility expectations.

Accessibility Features

  • Full APG Listbox keyboard contract: Arrow keys, Home/End, PageUp/PageDown, Enter/Space to select, Escape to close (with stopPropagation so it does not also close a parent dialog), Tab closes and moves focus to the next field.
  • Type-ahead: Typing printable characters jumps to the first option whose text starts with the buffered prefix. The buffer resets after 500 ms of inactivity.
  • Full ARIA wiring: aria-haspopup="listbox", aria-expanded, aria-controls (linking trigger to the listbox), and aria-activedescendant (announcing the focused option to screen readers as the user navigates).
  • Stable ids per instance: Listbox and option ids use useId(), so multiple selects on the same page never collide and SSR hydration matches.

Usage Example

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@holmdigital/components'; <Select> <SelectTrigger className="w-[180px]"> <SelectValue placeholder="Theme" /> </SelectTrigger> <SelectContent> <SelectItem value="light">Light</SelectItem> <SelectItem value="dark">Dark</SelectItem> <SelectItem value="system">System</SelectItem> </SelectContent> </Select>
Next →Introduction