Dropdown
A trigger that looks like a field and opens a list of options below it. Choosing one closes the list and shows the choice in the trigger.
Preview
When to use
- For one choice out of a list too long to show as Radio buttons: a country, a time zone, a role.
- Where space is tight and the current value matters more than the alternatives.
Reach for something else
- For fewer than five options people should compare: that is a Radio group.
- For a long list people will search: a combobox with filtering fits better.
Anatomy
- 1
Label
Above the trigger, as for an Input.
- 2
Trigger
Field-shaped button with the current value and a chevron.
- 3
List
A bordered panel below the trigger with one row per option.
- 4
Option
Text, an optional icon, and a tick on the selected one.
States
Closed
Shows the value, or a placeholder.
Open
The chevron turns; the list shows.
Active option
The option under the pointer or keyboard is washed.
Selected option
Carries a tick.
Disabled
The trigger is muted and does not open.
Accessibility
- The trigger is a button with aria-haspopup="listbox" and aria-expanded; the list is role="listbox" with role="option" rows.
- Down and Up move through options, Enter or Space chooses, Escape closes and returns focus to the trigger.
- The active option is exposed with aria-activedescendant, and the chosen one with aria-selected.
- Where a native <select> does the job, use it.
Source
The Dropdown is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block