amezquita design systemGet started

Primitives

Select

Dropdown for choosing a single value from a list; supports grouped options

Markdown version for agents

Import
import { Select } from '@amezquita/design-system/components/primitives/Select'

Live render

    Props

    PropTypeDescription
    value?string
    defaultValue?string
    onValueChange?(value: string) => void
    placeholder?string
    disabled?boolean
    required?boolean
    name?string
    groups{ label?: string; options: { value: string; label: string; disabled?: boolean }[] }[]
    aria-labelstringRequired: the trigger is a combobox, which gets no accessible name from its content — without this, screen readers announce an unnamed control.

    Tokens

    TokenTypeValue
    --select-item-padding-xdimension16px
    --select-item-padding-ydimension8px

    Usage example

    tsx
    <div style={{ maxWidth: '280px' }}>
  <Select {...args} />
</div>

    Accessibility

    • Trigger is a <button> via Radix — do not wrap it in another button
    • aria-label is a required prop — the trigger is a combobox, which gets no accessible name from its content, so an unnamed control is unshippable by type
    • Keyboard: Space / Enter / ArrowDown opens; arrow keys navigate; Enter selects; Escape closes
    • Focus returns to trigger on close (Radix default)