Combobox

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/combobox

UsageCopy Anchor Link

const customers = [
  { value: "northwind", label: "Northwind Traders" },
  { value: "globex", label: "Globex" },
];

<Combobox items={customers}>
  <ComboboxInput placeholder="Search customers" />
  <ComboboxContent>
    {(c) => (
      <ComboboxItem key={c.value} value={c}>
        {c.label}
      </ComboboxItem>
    )}
  </ComboboxContent>
</Combobox>

Pass the full list as items and render one item in the function child: the combobox filters it as you type. Items shaped { value, label } need nothing else; for other shapes, pass itemToStringLabel.

FilteringCopy Anchor Link

Matching ignores case and accents, and the first match is highlighted while you type, so typing a few letters and pressing Enter is enough. When nothing matches, the list says so instead of closing. Turn the highlight off with autoHighlight={false}, and change the empty text with empty on ComboboxContent.

Once something is chosen, a clear button appears in the field. The caret on the right opens the full list without typing.

GroupsCopy Anchor Link

Give items a list of groups, each with its own items, and render a ComboboxGroup per group with a ComboboxCollection inside. Groups with no matches disappear while filtering.

<Combobox items={regions}>
  <ComboboxInput placeholder="Type a country" />
  <ComboboxContent>
    {(group) => (
      <ComboboxGroup key={group.value} items={group.items}>
        <ComboboxLabel>{group.value}</ComboboxLabel>
        <ComboboxCollection>
          {(c) => <ComboboxItem key={c.value} value={c}>{c.label}</ComboboxItem>}
        </ComboboxCollection>
      </ComboboxGroup>
    )}
  </ComboboxContent>
</Combobox>

In a formCopy Anchor Link

Inside a Field with a name, the chosen value is submitted with the form and required is validated like Input, with the error under the field and nothing below it moving.

SizesCopy Anchor Link

size on Combobox: sm, md (default) or lg, the same heights as Select and Input. The list follows the size, so results line up with what you typed.

AccessibilityCopy Anchor Link

The field is read as a combobox with its list, and the highlighted option is read as you move through it. The clear and show-all buttons have their own names.

Home and End move the text cursor in the field, as in any text input.

Combobox or something else?Copy Anchor Link

• Under about ten options, or people pick without searching: Select.
• Searching for actions to run, not a value to fill in: Command.

API referenceCopy Anchor Link