Usage

Select dropdowns are used in forms when you have several options that are logically ordered:

  • State or country selector (alphabetical)
  • Orderby (Earliest to Latest)

It’s not about the number of choices

  • Do not arbitrarily use a select over radio buttons just because there are “more than 6 choices”.
  • If it is important that people perceive the other options or the options are not in a logical, numerical or alphabetical order then use radio buttons.

Do not design a custom select dropdown (aka popup listbox)

There are precisely 0 good reasons to redesign the select popup options. It is expensive and will inevitably become inaccessible at some point.

The default experience is not a bad experience.

Custom dropdown selects are notoriously difficult to make screen reader accessible.

…it is now thoroughly clear that recreating the native behavior of a <select> element is impossible: its underlying semantics differ across platforms; its keyboard behavior is inconsistent; its mobile presentation and behavior is entirely different from desktop. In making a custom UI control, we take upon ourselves what was the browser’s responsibility to define semantics, presentation, and behavior, and this means we must choose one single implementation to serve to everyone. — Sarah Higley, Web Developer at Microsoft

Even Angular Material documentation says “The native <select> offers the best accessibility because it is supported directly by screen-readers.”

Angular material custom listbox requires the Live Announcer overlay to be accessible, and advises using a native <select> for accessibility.

Angular Material also supports use of the native <select> element inside of <mat-form-field>. The native control has several performance, accessibility, and usability advantages.

Before you attempt to use one of these, be certain a native <select> is not an option and you understand the commitment for coding and testing across all platforms.

Annotations for select

  • Mark as <select> and directly communicate with the engineers that you do not want a custom listbox dropdown
  • You will also need to illustrate the popup options surface is expected to look different depending on platform (Windows vs MacOs etc.)

Working examples

Use the Semantic HTML <select>

  • This native select contains all the accessibility criteria for free and is styled to look cool.
  • It uses CSS pseudo attributes to create the arrow indicator, no Javascript.

Focusable disabled select

This select is focusable with all options disabled. Use this when some or all options are disabled and it’s helpful for people to understand what options exist.

Disabled select

This select is completely disabled and not focusable. Use this when it is not helpful for people to know what options exist.

Further reading

Related select dropdown entries