Dropdowns allow users to select one option from a temporary modal menu.
1 2 3 4 5 6 7 8 9 <form class="usa-form"> <label class="usa-label" for="options">Dropdown label</label> <select class="usa-select" name="options" id="options"> <option value>- Select -</option> <option value="value1">Option A</option> <option value="value2">Option B</option> <option value="value3">Option C</option> </select> </form>
When to use the dropdown component
- Use sparingly. Use the dropdown component only when a user needs to choose from about seven to 15 possible options and you have limited space to display the options.
When to consider something else
- Fewer than seven options. Use radio buttons instead.
- More than 15 options. If the list of options is very long. Let users type the same information into a text input that suggests possible options instead.
- Multi-select. If you need to allow users to select more than one option at once. Users often don’t understand how to select multiple items from dropdowns. Use checkboxes instead.
- Site navigation. Use the navigation components instead.
- Make sure to test. Test dropdowns thoroughly with members of your target audience. Several usability experts suggest they should be the “UI of last resort.” Many users find them confusing and difficult to use.
- Avoid dependent options. Avoid making options in one dropdown menu change based on the input to another. Users often don’t understand how selecting an item in one impacts another.
- Use a good default. When most users will (or should) pick a particular option, make it the default:
- Customize accessibly. If you customize the dropdown, ensure it continues to meet the the accessibility requirements that apply to all form controls.
- Always use a label. Make sure your dropdown has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the dropdown read “Select a state” by default).