Select

The Select component provides a dropdown interface for selecting one or multiple options from a list. It supports option groups, search functionality, and keyboard navigation.

Examples

Basic Usage

Country

<Select
  label="Country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
    { value: 'mx', label: 'Mexico' }
  ]}
  placeholder="Select a country..."
/>

Multiple Selection

Programming Languages

<Select
  label="Programming Languages"
  options={languages}
  multiple={true}
  placeholder="Select languages..."
/>

Option Groups

Programming Language

<Select
  label="Programming Language"
  options={[
    {
      group: 'Frontend',
      value: 'js',
      label: 'JavaScript'
    },
    {
      group: 'Backend',
      value: 'python',
      label: 'Python'
    }
  ]}
  placeholder="Select a language..."
/>

Required Field

Country

<Select
  label="Country"
  options={countries}
  required={true}
  placeholder="Select a country..."
/>

With Error

Country

Please select a country

<Select
  label="Country"
  options={countries}
  error="Please select a country"
  required={true}
/>

Disabled State

Country

<Select
  label="Country"
  options={countries}
  value="us"
  disabled={true}
/>

Props

Prop	Type	Default	Description
`label`	`string`	`''`	Input label
`options`	`Array<{ value: string, label: string, group?: string }>`	`[]`	Options to display in the dropdown
`value`	`string \| string[]`	`''`	Selected value(s)
`multiple`	`boolean`	`false`	Whether multiple selection is allowed
`placeholder`	`string`	`'Select...'`	Placeholder text when no option is selected
`disabled`	`boolean`	`false`	Whether the select is disabled
`error`	`string`	`''`	Error message
`required`	`boolean`	`false`	Whether the field is required
`class`	`string`	`''`	Additional CSS classes

Events

Event	Detail Type	Description
`onchange`	`{ value: string \| string[] }`	Fired when selection changes

Accessibility

The Select component follows WAI-ARIA guidelines for comboboxes and listboxes:

Proper ARIA roles and attributes for combobox and listbox
Support for required fields with visual and ARIA indicators
Error messages are linked using aria-describedby
Invalid states are indicated with aria-invalid
Proper focus management and keyboard interaction
Support for screen readers with ARIA labels
Clear visual feedback for selected and focused options

Keyboard Interaction

Enter or Space - Open/close dropdown and select focused option
Arrow Up/Down - Navigate through options
Tab - Move focus to next control
Escape - Close dropdown
Type - Search through options (when dropdown is open)