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.
Placeholder text and default selection
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
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.
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.
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
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.
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.