Select

Purpose

A select control lets users choose one (or multiple) options from a dropdown list. The native <select> element provides keyboard support and accessibility for free.

Usage Guidance

• Use native <select> for simple option selection
• Always associate a <label> with the <select>
• Reserve custom select implementations for scenarios where native styling constraints cannot be overcome
• For multi-select, native <select multiple> is preferred

Keyboard Support

Screen Reader Behavior

Screen readers announce the label, “combobox” role, and the currently selected option. Opening the dropdown announces the number of options available.

ARIA Requirements

Native <select> requires no ARIA. Associate it with a <label> via for/id.

Common Mistakes

• Custom select dropdowns without keyboard support
• Using aria-label instead of a visible <label>
• Multi-select without instructions on how to select multiple items

Live Example

Code Example

<label for="priority">Remediation Priority</label>
<select id="priority" name="priority">
  <option value="">Select a priority level</option>
  <option value="critical">Critical</option>
  <option value="high">High</option>
  <option value="medium">Medium</option>
  <option value="low">Low</option>
</select>