Select list
Last updated on
30 March 2018
Use when
- Number of options is 7 or more;
- Layout space is limited.
Example collapsed Select list
Example open Select list
Recommendations
- Use radio buttons when the number of options is less than 7.
- For long lists with predictable content, autocomplete textfield should be considered.
- Try to limit the length of the list where possible, 5 to 15 items is a usable maximum.
- Multiple option select lists (using the
#multiple
property) are discouraged – use radio buttons or checkboxes where possible.- Many users don't know how to select multiple items in a select list. (It involves holding the Control key while clicking each option.)
- There is an accessibility bug with Blink-based browsers (Chrome, Opera) which prevents users from selecting multiple options that are not next to each other.
API
The problem this solves
The user should select one option from a pre-defined set of options (number of options being 7 or more).
Help improve this page
Page status: No known problems
You can:
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion