Select

Natively-styled <select> for single-choice form input. CSS-only.

In v1.0 we ship a styled native select. A custom dropdown with search and rich options is deferred to v1.1 if community demands it.

When to use

• A single-value choice from 3-15 options where the labels are short.
• A form field where the OS-native dropdown is acceptable.

For larger sets or filterable options, use a custom Multiselect (v1.1) or compose Radio-group + Search.

Variants

Anatomy

<select class="select">
  <option value="">Choose a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="ua">Ukraine</option>
</select>

<select class="select -s" disabled>
  <option>Read-only</option>
</select>

<select class="select" aria-invalid="true">
  <option value="">Choose…</option>
</select>

The chevron is drawn via a CSS background-image SVG so the dropdown is visually consistent across browsers (browsers won't let CSS style the native trigger arrow directly).

Tokens used

• --color-surface-canvas — background
• --color-surface-raised — disabled background
• --color-border-strong — border
• --color-accent — focus
• --color-danger — error
• --color-ink-strong — text
• --space-inset-element-* — padding
• --size-control-* — min-height
• --radius-field — corner radius
• --border-width-hairline / --border-width-focus
• --font-body-{s,m,l}-* — typography
• --motion-fast / --motion-easing-default

Accessibility

Native <select> carries:

• Keyboard input (Up/Down to change, Enter/Space to open, type-ahead search).
• Screen reader announces the current selection.
• aria-invalid="true" produces the same visual state as .-error.
• Disabled state via disabled attribute.

Authors do not need to add ARIA — the native element is the right semantic.

Edge cases

• Native options can't be styled — <option> background and text color render per OS. This is acceptable for v1.0.

• First option as placeholder — set an empty value="" on the first option, mark it disabled or hidden after first selection:

  <select class="select" required>
    <option value="" disabled selected>Choose a country</option>
    <option value="us">United States</option>
  </select>
  

• Multiple-select: <select multiple> is supported but renders as a list box, not a dropdown. We do not optimize visual styling for that case in v1.0.

Do

• Use <select> for short, mutually-exclusive choice lists.
• Provide a placeholder first option for required fields.

Don't

• Don't style <option> background/color via CSS — it won't work consistently.
• Don't combine with a custom popover — pick one pattern per field.