Select
The native dropdown, styled — because native is the accessible one.
Show the markup
<div class="cc-field">
<label class="cc-label" for="ex-select">Department</label>
<select class="cc-select" id="ex-select">
<option>Town Clerk</option>
<option>Assessor's Office</option>
<option>Board of Health</option>
</select>
</div>
Accessibility
- A styled native
<select>— screen reader, keyboard and mobile behavior come from the platform, where it's best. - For type-to-filter over long lists, use Suggestion.
- Selecting an option must never itself trigger navigation (3.2.2) — pair with a Go button if it does.