Forms

Combobox

A select you can type into, for long option lists.

import { Combobox } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Countries

Country

Type to filter, then use the arrow keys.

Show code

combobox/countries.tsx

'use client';

import { Combobox, Field } from '@jsonresume/ui';
import * as styles from './countries.css';

const countries = [
  'Australia',
  'Austria',
  'Brazil',
  'Canada',
  'Germany',
  'India',
  'Japan',
  'Netherlands',
  'New Zealand',
  'United Kingdom',
  'United States',
].map((label) => ({ value: label.toLowerCase().replace(/\s/g, '-'), label }));

export default function ComboboxCountries() {
  return (
    <Field
      label="Country"
      hint="Type to filter, then use the arrow keys."
      className={styles.root}
    >
      <Combobox options={countries} placeholder="Choose a country" />
    </Field>
  );
}

combobox/countries.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: 'min(100%, 20rem)' });

Usage

Do

Use when there are more than about 15 options.

Don’t

Use for a handful of options: use Select or SegmentedControl.

Accessibility

Follows the ARIA combobox pattern: arrow keys move through options (aria-activedescendant), Enter picks, Escape closes.

Props

Also accepts the attributes of the element Combobox renders.
Prop	Type	Default	Description
options required	ComboboxOption[]	–
defaultValue	string \| null	null
emptyText	string	No matches	Shown when nothing matches the typed text.
onValueChange	((value: string \| null) => void)	–
value	string \| null	–