Combobox

Searchable single-select built on Popover + Command (cmdk). Used for the TpEMIS university picker, program picker, and any other long lookup list where a plain Select would create a wall of options. Forwards refs and consumes semantic tokens, so brand overrides re-tint the focus ring and selected highlight automatically.

Default — university picker

Type-to-filter narrows the 10 stub tenants. Arrow keys + Enter select; Escape closes the popover.

University

Selected value: none

Program picker — preselected

Initial value renders without a placeholder. Same primitive, different label and option set.

Program of interest

With disabled options

Options can be flagged unavailable while still showing in the list.

Shirt size

Search disabled

Set searchable=false for short option lists where the search input would feel like overkill.

University (no search)

Disabled state

Trigger respects the same disabled styling as the rest of the form controls.

Locked field

Accessibility

  • Trigger gets role="combobox" with aria-expanded tracking the popover state.
  • aria-controls links the trigger to the listbox so screen readers expose the relationship.
  • Provide an ariaLabel when no visible label sits above the trigger.
  • cmdk handles arrow-key navigation, type-to-filter, and Enter-to-select for free.
  • Pass name to render a hidden input so the value submits inside an HTML form without extra plumbing.