Components

Select

A native dropdown select styled to match the design system. Supports labels, hint/error states, and disabled options.

Basic usage

Pass an options array and optional placeholder.

States

Hint, error, and disabled states work identically to the Input component.

Choose your primary region.

Please select a country.

Props

PropTypeDefaultDescription
optionsrequiredSelectOption[]—Array of { value, label, disabled? } objects.
labelstring—Label text displayed above the select.
placeholderstring—Placeholder shown when no value is selected.
errorstring—Error message displayed below. Adds red styling.
hintstring—Helper text displayed below (hidden when error present).
...restSelectHTMLAttributes—All native select props are forwarded.

Accessibility

  • Uses native <select> for built-in keyboard support.
  • Label is associated via htmlFor.
  • aria-invalid is set when error is present.
  • Hint/error linked with aria-describedby.