Home/Components/Select & combobox

Select & combobox

Pick one from a list. Use a native <select> for short lists; reach for a combobox (searchable) when there are more than ~10 options.

Stable .select Native + comboboxKeyboard

Usage

A native select inherits OS keyboard support. We style its chevron via background-image so it matches the rest of the system.

Native select.select

Rest

Focus

Disabled

Invalid

For long lists, render a custom input with a popover of options. The popover uses --shadow-popover and surface elevation rules.

Mukamba, R

3 children · $ 3,040 outstanding

Mukamba, J

1 child · $ 280 outstanding

Mukunyadze, T

2 children · cleared

Combobox · openrole="combobox"

Property	Value	Notes
height	36 px	30 sm · 44 lg
chevron	SVG background-image	12 px · text-subtle
popover	--shadow-popover	Always above current focus row
highlight	--brand-soft	Selected & keyboard-active row
keyboard	↑ ↓ Enter Esc	Native on select; reimplemented on combobox

Use native <select> for up to ~10 options. It's accessible, fast, and free.

Don't

Build a custom dropdown for two options — use a segmented control or a switch instead.

For comboboxes, search across the whole row (name + sub-text) so the user finds things by partial info.

Don't

Reset the input on blur. Persist what the user typed.

<select class="select">
  <option>Park Centre</option>
  <option>Avondale</option>
</select>