Skip to main content Curbcut by Baseline
Menu
All components

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

  • cc-select--inline sizes to content instead of filling the field — for a select in a header or toolbar.
  • The chevron is a per-mode token, so the affordance stays visible in dark mode (1.4.11) — a data URI cannot read currentColor.
  • 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.