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
- Native Mimicry: Matches the keyboard behavior of a native select (Arrows, Typing to search, Enter/Space to select).
- Aria Attributes: Correctly manages
aria-haspopup,aria-expanded, andaria-activedescendant.
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>