Components · Forms & selection
Combobox
A single-select control with typeahead filtering — a Select you can type into. The trigger matches the input surface with a chevron affordance; the open list reuses the Select / popover menu. Use it when the option set is long enough that scanning is slow.
Preview
The closed trigger across the three themes. The filtered list is the framework primitive's job.
Light
Dark
Accessibility
Spec
Values and token references straight from the Zetta spec.
combobox-trigger
- backgroundColor
- {colors.surface-card}
- textColor
- {colors.ink}
- placeholderColor
- {colors.placeholder}
- placeholderStyle
- italic
- borderColor
- {colors.border-strong}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 400
- lineHeight
- 1.6
- height
- 32px
- paddingX
- 14px
- chevronSize
- 16px
- chevronColor
- {colors.muted}
- display
- flex
- alignItems
- center
- justifyContent
- space-between
- cursor
- pointer
combobox-trigger-hover
- borderColor
- {colors.border-strong}
- boxShadow
- {shadows.sm}
combobox-trigger-focus
- borderColor
- {colors.border-focus}
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
combobox-trigger-invalid
- borderColor
- {colors.danger}
combobox-trigger-invalid-focus
- borderColor
- {colors.danger}
- outline
- 2px solid {colors.danger}
- outlineOffset
- 2px
combobox-trigger-disabled
- backgroundColor
- {colors.disabled-bg}
- textColor
- {colors.disabled-text}
- borderColor
- {colors.disabled-border}
- cursor
- not-allowed
Build with the skill
No package to install — hand this to your AI to generate the combobox in your stack.
Implement the Zetta "Combobox" component in this project's stack using the zetta-design-md skill.
- Apply the `combobox` spec from the skill (variants: default, invalid, disabled).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.Anatomy & rules
- 32px trigger, base radius, hairline-strong border, 16px muted chevron; hover lifts
shadow-sm, focus rings, invalid goesdanger. - Filter on input, highlight the active option, and commit on Enter. Reach for a plain Select when there are only a handful of options.
Accessibility
- Wire the ARIA combobox pattern:
role="combobox",aria-expanded,aria-controlsandaria-activedescendant. Full keyboard support — type to filter, arrows to move, Enter to select, Escape to close.
Known gaps
- The spec defines the trigger surface only; list item, group and empty-state styling follow the Select / multi-select list tokens.