Combobox

Combobox combines a text input with a listbox, allowing users to filter a list of options to items matching a query.

<Combobox aria-label="country">
  <InputGroup>
    <Input placeholder="Select a country..." />
    <InputGroupAddon>
      <Button variant="quiet" isIconOnly>
        <ChevronDownIcon />
      </Button>
    </InputGroupAddon>
  </InputGroup>
  <Popover>
    <ListBox>
      <ListBoxItem>Canada</ListBoxItem>
      <ListBoxItem>France</ListBoxItem>
      <ListBoxItem>Germany</ListBoxItem>
      <ListBoxItem>Spain</ListBoxItem>
      <ListBoxItem>Tunisia</ListBoxItem>
      <ListBoxItem>United states</ListBoxItem>
      <ListBoxItem>United Kingdom</ListBoxItem>
    </ListBox>
  </Popover>
</Combobox>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/combobox

Usage

Use Combobox to allow users to filter a list of options to items matching a query and select an item from the list.

import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from "@/components/ui/combobox";

<Combobox>
	<ComboboxInput />
	<ComboboxContent>
		<ComboboxItem>Option 1</ComboboxItem>
		<ComboboxItem>Option 2</ComboboxItem>
	</ComboboxContent>
</Combobox>

Playground

Use the controls below to experiment with different combobox props and see the live preview and code update.

Country

label

placeholder

isDisabled

isInvalid

<Combobox>
  <Label>Country</Label>
  <InputGroup>
    <Input placeholder="Search countries..." />
    <InputGroupAddon>
      <Button variant="quiet" isIconOnly>
        <ChevronDown />
      </Button>
    </InputGroupAddon>
  </InputGroup>
  <Popover>
    <ListBox>
      <ListBoxItem id="us">United States</ListBoxItem>
      <ListBoxItem id="uk">United Kingdom</ListBoxItem>
      <ListBoxItem id="fr">France</ListBoxItem>
      <ListBoxItem id="de">Germany</ListBoxItem>
      <ListBoxItem id="jp">Japan</ListBoxItem>
    </ListBox>
  </Popover>
</Combobox>

Examples

Country

Please select a country.

Country

Please select a country in the list.

You selected: tn

Pokemon

API Reference

Combobox

A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.

Prop	Type	Default
	`boolean`	`—`
	`MenuTriggerAction`	`'input'`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`((textValue: string, inputValue: string) => boolean)`	`—`
	`DOMRenderFunction<"div", ComboBoxRenderProps>`	`—`

	`ReactNode \| function`	`—`
	`Iterable<T>`	`—`
	`Iterable<T>`	`—`

	`M`	`'single'`
	`Key \| null`	`—`
	`Key \| null`	`—`
	`function`	`—`
	`Iterable<Key>`	`—`
	`boolean`	`—`

	`ValueType<M>`	`—`
	`ValueType<M>`	`—`
	`function`	`—`
	`string`	`—`
	`string`	`—`
	`function`	`—`

ComboboxInput

Missing description.

Prop	Type	Default
	`string`	`—`
	`ReactNode \| function`	`—`
	`union`	`—`
	`string`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`DOMRenderFunction<"div", GroupRenderProps>`	`—`

ComboboxContent

Missing description.

Prop	Type	Default
	`boolean`	`—`
	`DragAndDropHooks<NoInfer<T>>`	`—`
	`"grid" \| "stack"`	`'stack'`
	`Orientation`	`'vertical'`
	`Placement`	`'bottom'`
	`DOMRenderFunction<"div", ListBoxRenderProps>`	`—`

	`ReactNode \| function`	`—`
	`Iterable<T>`	`—`
	`ReactNode \| function`	`—`
	`readonly any[]`	`—`

	`SelectionMode`	`—`
	`SelectionBehavior`	`"toggle"`
	`Iterable<Key> \| "all"`	`—`
	`Iterable<Key> \| "all"`	`—`
	`function`	`—`
	`Iterable<Key>`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`"clearSelection" \| "none"`	`'clearSelection'`

Last updated on 5/22/2026