Select dropdowns
When there are too many options for a radio set, a dropdown may be the best approach.
select elements are used to give the user a list of items to choose from. Before using a select, we should first explore if an input with type="radio" can't be used.
Keyboard operability for Windows
- Tab to place focus on the select drop down list
- Spacebar will open the list but not close it
- Enter will open and close the list
- Up and down arrows can be used to make selection
- Tab to move focus from the select drop down list
Keyboard operability for Mac
- Tab to place focus on the select control
- Space, Up, or Down opens the list, highlighting the first option (if the first item is disabled, nothing is highlighted)
- Up and Down move up and down in the list; when the first option is reached:
- Up does not move the highlight any further; when the last option is reached
- Down does not move the highlight any further
- Tab does not do anything when the list is open
- Space or
Enter chooses the currently highlighted option and closes the list - Escape closes the list without selecting an option
Select with default value
This is done with a ‘blank’ option that has:
- The
selectedattribute so that it is selected by default - An empty
valueattribute so that it doesn’t submit any data and hopefully triggers validation - The
disabledattribute so it can’t be reselected
Select with optgroups
Values within a dropdown can be grouped.
The datalist element can also be used to enhance a text field with a predefined list of values.