Dropdown

A dropdown displays a list of selectable options in a floating panel.

Recipes

Select List

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

Powertrain

333 mi

Placeholder

• 
  Powertrain

  333 mi

  Option 1
• 
  Powertrain

  333 mi

  Option 2
• 
  Powertrain

  333 mi

  Option 3

source code

Checkbox List

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

Select options

• Option 1
• Option 2
• Option 3
• Option 4
• Option 5
• Option 6

Clear All Show results

source code

Accessibility

The dropdown follows the WAI-ARIA Listbox pattern.

Roles & attributes

Element	Attributes
Trigger button	aria-haspopup="listbox", aria-expanded, aria-labelledby (pointing to a visible label)
List container	role="listbox". Add aria-multiselectable="true" for checkbox-style dropdowns.
Each option	role="option". Set aria-selected="true" on the active option.

Use aria-activedescendant on the listbox to communicate the currently focused option without moving DOM focus.

Keyboard interaction

Key	Action
Enter / Space	Open dropdown or select the focused option
↑ / ↓	Move focus between options
Home / End	Move focus to first / last option
Escape	Close dropdown, return focus to trigger