Usage
A dropdown is a labelled input that opens a menu of options and keeps the one someone chooses. Use it when the answer comes from a known set and typing would cause mistakes. It holds one value, so a second choice replaces the first.
- Label every dropdown with the value being chosen, and keep that label visible after a choice is made.
- Order the options the way people will look for them, alphabetically or by how often each one is picked.
- Show the chosen option in the field, so the answer reads without opening the menu again.
- Use for a value that has to be typed (use a text field).
- Use where three or four options would fit on the screen (use a radio button).
- Use to collect more than one answer (use a checkbox).
- Use the placeholder as the label. It goes away the moment someone types, and the field is then unlabelled.
Design properties
| Property | Values | Default |
|---|---|---|
| Expanded Variant | False | True | False |
| Item selected Variant | True | False | False |
Types
Material has two dropdown types, filled and outlined. Firefox for Android uses the outlined type everywhere, and the two are never combined in one app.
Outlined
Use for all dropdowns, where a label and the value selected are all it needs.
Options
Supporting text
Use when an error message has to sit under the dropdown or when additional information could be helpful to make a selection.
Behavior and interaction
Behavior
- Touching anywhere on the dropdown opens the menu, so the chevron is not a separate target.
- Selecting an option closes the menu, puts that option in the field, and gives the menu item a leading checkmark next time the menu opens.
- Touching outside closes the menu and leaves the value as it was.
- The menu scrolls once its content exceeds 200 dp.
- The error message takes the place of the supporting text rather than sitting under it. Write both so either one reads on its own.
Positioning
- Anchor the menu to the trailing edge.
- Stack fields in the order they will be filled, with the submitting button after the last one.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 31, 2026 |
1.0.0 |
Initial draft of guidance |