Dropdown

The Dropdown component provides a way to select one or multiple options from a dropdown menu. It supports icons, option groups, cascading menus, filtering, and keyboard navigation.

Examples

Basic Usage

<Dropdown 
  options={['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']}
  placeholder="Select a fruit"
/>

With Object Options

const countries = [
  { label: 'United States', value: 'us' },
  { label: 'United Kingdom', value: 'uk' },
  { label: 'Canada', value: 'ca' }
]

<Dropdown 
  options={countries}
  placeholder="Select a country"
/>

Multiple Selection

const skills = [
  { label: 'JavaScript', value: 'js' },
  { label: 'TypeScript', value: 'ts' },
  { label: 'Svelte', value: 'svelte' },
  { label: 'React', value: 'react' },
  { label: 'Vue', value: 'vue' }
]

<Dropdown 
  options={skills}
  placeholder="Select skills"
  multiple={true}
/>

With Icons

const countries = [
  { 
    label: 'United States', 
    value: 'us', 
    icon: '<svg>...</svg>' 
  },
  { 
    label: 'United Kingdom', 
    value: 'uk', 
    icon: '<svg>...</svg>' 
  },
  { 
    label: 'Canada', 
    value: 'ca', 
    icon: '<svg>...</svg>' 
  }
]

<Dropdown 
  options={countries}
  placeholder="Select a country"
  optionIcon="icon"
/>

Cascading Dropdown

const categories = [
  { 
    name: 'Frontend', 
    id: 'frontend',
    items: [
      { name: 'HTML', id: 'html' },
      { name: 'CSS', id: 'css' },
      { name: 'JavaScript', id: 'js' }
    ]
  },
  { 
    name: 'Backend', 
    id: 'backend',
    items: [
      { name: 'Node.js', id: 'node' },
      { name: 'Python', id: 'python' },
      { name: 'Java', id: 'java' }
    ]
  }
]

<Dropdown 
  options={categories}
  placeholder="Select a category"
  optionLabel="name"
  optionValue="id"
  optionChildren="items"
/>

With Filtering

<Dropdown 
  options={skills}
  placeholder="Search and select skills"
  filter={true}
/>

Different Sizes

<Dropdown 
  options={['Small', 'Medium', 'Large']}
  placeholder="Small"
  size="sm"
/>
<Dropdown 
  options={['Small', 'Medium', 'Large']}
  placeholder="Medium"
  size="md"
/>
<Dropdown 
  options={['Small', 'Medium', 'Large']}
  placeholder="Large"
  size="lg"
/>

Clearable

<Dropdown 
  options={countries}
  placeholder="Select a country"
  clearable={true}
/>

Disabled State

<Dropdown 
  options={countries}
  placeholder="Select a country"
  disabled={true}
/>

Props

Prop	Type	Default	Description
`options`	`Array`	`[]`	Options to display in the dropdown
`value`	`any`	Required	Selected value(s)
`placeholder`	`string`	`'Select an option'`	Placeholder text when no option is selected
`multiple`	`boolean`	`false`	Whether multiple selection is allowed
`optionLabel`	`string`	`'label'`	Property name for option label when using object options
`optionValue`	`string`	`'value'`	Property name for option value when using object options
`optionIcon`	`string`	Required	Property name for option icon when using object options
`optionChildren`	`string`	`'items'`	Property name for option children (for cascading dropdowns)
`disabled`	`boolean`	`false`	Whether the dropdown is disabled
`required`	`boolean`	`false`	Whether the dropdown is required
`filter`	`boolean`	`false`	Whether to enable filtering options by typing
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the dropdown
`clearable`	`boolean`	`false`	Whether to show a clear button
`name`	`string`	Required	Name attribute for form submission
`ariaLabel`	`string`	Required	ARIA label for accessibility
`id`	`string`	`auto-generated`	HTML id for accessibility
`class`	`string`	`''`	Additional CSS classes

Events

Event	Detail Type	Description
`onchange`	`{ value: any }`	Fired when the selected value changes
`onclear`	`Event`	Fired when the selection is cleared

Accessibility

The Dropdown component follows WAI-ARIA guidelines for combobox and listbox elements:

Uses appropriate ARIA roles (combobox, listbox, option)
Provides proper keyboard navigation
Manages focus appropriately
Includes proper ARIA attributes for expanded state and selection
Supports screen readers with appropriate labels and descriptions

Keyboard Interaction

Space or Enter - Open/close dropdown and select highlighted option
ArrowDown - Open dropdown or move to next option
ArrowUp - Move to previous option
ArrowRight - Open submenu (for cascading dropdowns)
ArrowLeft - Close submenu (for cascading dropdowns)
Escape - Close dropdown
Tab - Move focus away from dropdown
Home - Move to first option
End - Move to last option