Combobox

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

On this page

Country

Props

label

placeholder

isDisabled

isInvalid

<Combobox>
  <Label>Country</Label>
  <InputGroup>
    <Input />
    <InputGroupAddon>
      <Button variant="quiet" isIconOnly>
        <ChevronDownIcon />
      </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>

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>

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)`	`—`

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

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

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

ComboboxValue

Renders the current value of a Combobox, or a placeholder if no value is selected. Supports a render prop for custom rendering of the selected item(s) — useful for multi-select with tags.

Prop	Type	Default
	`ReactNode`	`—`
	`ReactNode \| function`	`—`

Last updated on 6/16/2026