Select
- Selector
select
The select is a control that lets the user select a choice from a list of options. When using
the select, use a label with the for attribute referencing the select
to provide an accessible name for the control. To optionally create separate groups of options
in the select, you can use the optgroup element.
A radio group and a select can both be used for similar purposes - getting a selection from the user. The differences between the two are mostly design related. A select puts emphasis on the selected option while a radio group places emphasis equally. Selects are also better suited for more options since each option in a radio group takes up screen space.
States
The select will receive a red border and warning icon when invalid through the
:invalid pseudo-state. In most cases, the browser will automatically mark the field
as invalid when using
built in form validation, but it can also be triggered manually by applying aria-invalid="true" to the
select. Like inputs, they are considered to be valid when not invalid. Unlike the input however,
there aren't too many ways for the user to mess up with the select, since the interface is
fairly straightforward. You can still use aria-invalid="false" to explicitly
communicate this however.
Multiple Selection
Mango UI also supports the little-known <select multiple />. Avoid using this
variation when possible since it comes with poor usability. Users aren't typically familiar with
the keyboard shortcuts required to select multiple options. As an alternative, you can use
multiple checkboxes to achieve something similar.
Mouse Users
Holding Ctrl/Cmd, you can toggle the selection of each item you click. Holding Shift while clicking will select all of the items between the current target and the last option that was clicked. Every other option outside of that range will be deselected. Clicking without holding any key will select the target and deselect every other option.
Keyboard Users
Using the arrow keys while focused on a multiple select will move both the focus and the selection, deselecting all other options. To select multiple contiguous items, use the arrow keys and hold Shift to expand or shrink the selection. Selecting multiple non-contiguous items is troublesome and not suported in Safari. On Chrome and Firefox, hold Cmd/Ctrl while pressing an arrow key to move focus to the next option (the selection remains). Then press Enter to toggle that option.