Use dropdown menus to let users select an action or options from a set of choices. Typically, dropdown menus are used when you have more than 5 options.
Dropdown menus should:
- Be limited to 15 items. Consider breaking large lists out into categories and using dropdowns or other list formats.
- Be avoided when typing may be faster, such as selecting a country from a large list.
- Be avoided for data that is familiar to users, such as birthdays.
- Always have the
- Always support keyboard input.
How it works
<select> menus need only a custom class,
.custom-select to trigger the custom styles. Custom styles are limited to the
<select>’s initial appearance and cannot modify the
<option>s due to browser limitations.
You may also choose from small and large custom selects to match our similarly sized text inputs.
In most cases the default sized form components should be used. Smaller sizing could be used in instances where there are space limitations or the form is not the main action on the page (a form within the footer or sidebar for instance).