Select Preview
A select lets people choose a single option from a list of at least four options. Selects use browser native styling for the listed options. They are ideal for data submission in forms and ease of use on mobile platforms.
If you need to control the styles or format the options in the list, try a dropdown. If you need to let someone type in the visible field to submit a free form answer, or to filter the list of options, try a combobox. For a standardized form component including helper text and validation styles, use the select field component.
Resources
Behavior
Default selection
On first render, selects will show the first option in the menu as the default selection. You can change the default selection by defining the defaultValue prop on the select element or by using the selected prop on the appropriate option element.
Default selection behavior
Content
Use descriptive labels that tell people what they can find in the menu. Single words or short phrases are best.
Write select 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.
