Components

Combobox

A combobox is a typeable field with a filterable list — the same keyboard contract as Select, but the query narrows the options. This recipe covers the generic pattern; Event search adds inline creation on top.

Anatomy

Choose an athlete

Input matches Input exactly. List matches Select content — 4px radius, popover shadow, highlighted row = surface-muted, not accent tint.

Specification

Property	Value	Why
Recipe	`combobox({ scale, rowHeight, invalid })`	Visual layer — Radix Combobox or ARIA 1.2 pattern for behaviour
Input	Same as Input per `scale`	One field voice across the system
List	`z-dropdown`, `max-h-72`, native scroll	Same cap as Select — menu must not cover the field
Highlight	`surface-muted`	Colour stays reserved for meaning
Empty	`empty` slot, caller copy required	No default string in `ui` — same rule as Select

Structure

<label for="athlete">Choose an athlete</label>
<div class={c.field()}>
  <Combobox.Input class={c.input()} placeholder={placeholder} />
  <Combobox.Content class={c.content()}>
    <Combobox.Item class={c.item()} value="ana">Ana Ferreira</Combobox.Item>
    <Combobox.Empty class={c.empty()}>{emptyText}</Combobox.Empty>
  </Combobox.Content>
</div>

Required props

Same rule as Select

placeholder and emptyText are required props at the wrapper. A string literal in ui/src/ is a defect. Example empty copy: No athlete matches "…" — name the query, say what failed.

Props

Prop	Type	Default	Notes
`scale`	`'md' \| 'sm'`	`'md'`	44px touch floor at `md`
`rowHeight`	`'inherit' \| 'compact' \| 'touch'`	`'inherit'`	`touch` keeps 44px list rows on mobile
`invalid`	`boolean`	`false`	Destructive border on the input

Rules

No inline creation here. The create row is Event Search's duplicate-prevention job — see Event search.
Same keyboard contract as search and multi-select. Arrow keys, Enter to select, Esc to close. Two comboboxes in one panel must behave identically.
Empty is a real state. Say what was searched and that nothing matched — not a blank list.
Do not offer creation while loading or on error. See Event Search state machine; the generic combobox has no create row at all.

See also: Select · Multi-select · Event search

Sporting Scouter Design System

Every token on this site is generated from theme.css.