Dropdown Preview
A dropdown lets people choose one or more options from a list. It can be used in forms to gather information where the options require custom styling or in UI to filter and sort information.
If you're designing a form, especially for mobile platforms, consider using a select for baked-in accessibility. If you need to let someone type in the visible field to submit a free form answer, or to filter the list, try a combobox.
Resources
Behavior
Placeholder text and default selection
If the placeholder prop is not set, dropdowns will show as empty until a selection is made. Use placeholder text as an extra hint that helps people understand the options in a dropdown. Don’t use it to label the dropdown.
To display a default selection instead of placeholder text, use the defaultSelectedOptions prop.
Single select dropdowns
Selecting a closed field opens the list of options. Choosing an option from the list will close the field and the selected text replaces any placeholder text.
Multi-select dropdowns
For multi-select interactions, each list item is accompanied by a checkbox. The list of options won’t close until someone dismisses it, either by clicking off the list or by pressing Esc. The selected text will replace the placeholder unless the selections exceed the width of the container. In that case, the field will show how many options are selected. Set the multiselect prop to true to enable multiple selections.
Accessibility
The text prop
Use the text prop to define a string value for complex options, especially ones that contain JSX. Setting the text prop ensures that people can navigate dropdown options by typing a letter or string of letters to find matching options and that the closed dropdown will display the correct data once a selection’s been made.
Optimize for screen readers
Set inlinePopup to true when possible for better VoiceOver support. The inlinePopup prop will cause the listbox popup to be rendered immediately after the button in the DOM. Safari doesn’t support aria-owns, so this enables iOS VoiceOver swipe navigation between the button and options.
Content
Use descriptive labels that tell people what they can find in the menu. Single words or short phrases are best.
Write dropdown options using parallel construction, for example all nouns or all verbs, but don’t repeat the same word or phrase at the beginning of each option. If “none” is an option, include it.
Use sentence-style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.
