shadcn.io is not affiliated with official shadcn/ui

Shadcn Combobox for React

Displays a searchable list of options.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/combobox.json

npx shadcn@latest add https://kit.dev/r/base/combobox.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/combobox.json

yarn shadcn@latest add https://kit.dev/r/base/combobox.json

This component depends on Button and Input Group. Install them first if you haven't already.

Install the following dependencies:

bun add @base-ui/react lucide-react

npm install @base-ui/react lucide-react

pnpm add @base-ui/react lucide-react

yarn add @base-ui/react lucide-react

Copy and paste the following code into your project.

components/ui/combobox.tsx

"use client";

import { Combobox as ComboboxPrimitive } from "@base-ui/react";
import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/registry/base/components/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/registry/base/components/input-group";

export const Combobox = ComboboxPrimitive.Root;

export const ComboboxValue = (props: ComboboxPrimitive.Value.Props) => (
  <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />

Update the import paths to match your project setup.

Anatomy

ComboboxRoot
├── ComboboxClear
├── ComboboxContent
├── ComboboxControl
├── ComboboxFieldInput
├── ComboboxItem
│   ├── ComboboxGroup
│   │   └── ComboboxGroupLabel
│   ├── ComboboxItemIndicator
│   └── ComboboxItemText
├── ComboboxLabel
├── ComboboxList
├── ComboboxPositioner
└── ComboboxTrigger

Usage

import { useListCollection } from "@ark-ui/react/collection";
import { useFilter } from "@ark-ui/react/locale";
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"];

const ComboboxDemo = () => {
  const { contains } = useFilter({ sensitivity: "base" });
  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems: frameworks,
  });

  const handleInputValueChange = ({ inputValue }: { inputValue: string }) => {
    filter(inputValue);
  };

  return (
    <Combobox
      collection={collection}
      onInputValueChange={handleInputValueChange}
    >
      <ComboboxInput placeholder="Select a framework" />
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item}>
              {item}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

Accessibility

Key	Description
`ArrowDown`	Move down.
`ArrowUp`	Move up.
`Home`	Go to the start.
`End`	Go to the end.
`Enter`	Activate the focused item.
`Escape`	Dismiss.
`Space`	Activate the focused control.

Demos

Basic

A simple combobox with a list of frameworks.

PreviewCode

Multiple

A combobox with multiple selection using multiple and ComboboxChips.

PreviewCode

Clear

Use the showClear prop to show a clear button.

PreviewCode

Groups

Use ComboboxGroup and ComboboxSeparator to group items.

PreviewCode

Custom

You can render a custom component inside ComboboxItem.

PreviewCode

Invalid

Use the aria-invalid prop to make the combobox invalid.

PreviewCode

Disabled

Use the disabled prop to disable the combobox.

PreviewCode

Auto Highlight

Use inputBehavior="autohighlight" to automatically highlight the first item on filter.

PreviewCode

Trigger the combobox from a button. Move ComboboxInput inside ComboboxContent.

PreviewCode

Input Group

Add an addon to the combobox with InputGroupAddon inside ComboboxInput.

PreviewCode

Rtl

Right-to-left combobox. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Combobox

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

ComboboxValue

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"combobox-value"

ComboboxTrigger

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-trigger"

ComboboxClear

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-clear"

ComboboxInput

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

ComboboxContent

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-content"

data-chips?string

CSS variableType

--anchor-widthstring

--available-heightstring

--available-widthstring

--transform-originstring

ComboboxList

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-list"

ComboboxItem

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-item"

ComboboxGroup

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-group"

ComboboxLabel

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-label"

ComboboxCollection

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"combobox-collection"

ComboboxEmpty

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-empty"

ComboboxSeparator

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-separator"

ComboboxChips

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-chips"

ComboboxChip

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-chip"

ComboboxChipsInput

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"combobox-chip-input"

Installation

This component depends on Button and Input Group. Install them first if you haven't already.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Anatomy

Usage

Accessibility

Demos

Basic

Multiple

Clear

Groups

Custom

Invalid

Disabled

Auto Highlight

Popup

Input Group

Rtl

API Reference

Combobox

ComboboxValue

ComboboxTrigger

ComboboxClear

ComboboxInput

ComboboxContent

ComboboxList

ComboboxItem

ComboboxGroup

ComboboxLabel

ComboboxCollection

ComboboxEmpty

ComboboxSeparator

ComboboxChips

ComboboxChip

ComboboxChipsInput