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/aria/combobox.json

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

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

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

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

Install the following dependencies:

bun add react-aria-components lucide-react

npm install react-aria-components lucide-react

pnpm add react-aria-components lucide-react

yarn add react-aria-components lucide-react

Copy and paste the following code into your project.

components/ui/combobox.tsx

"use client";

import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
import React from "react";
import {
  Button as ButtonPrimitive,
  Collection,
  ComboBox as ComboBoxPrimitive,
  ComboBoxStateContext,
  ComboBoxValue as ComboBoxValuePrimitive,
  composeRenderProps,
  Group,
  Header as HeaderPrimitive,
  Input as InputPrimitive,
  ListBoxItem as ListBoxItemPrimitive,
  ListBox as ListBoxPrimitive,
  ListBoxSection as ListBoxSectionPrimitive,
  Popover as PopoverPrimitive,

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

AttributeType

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxValue

AttributeType

data-slot"combobox-value"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxTrigger

PropType

className?string

AttributeType

data-slot"combobox-trigger"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxClear

PropType

clickEffect?boolean

href?string

isLoading?boolean

pill?boolean

type?"button" | "submit" | "reset"

className?string

AttributeType

data-slot"combobox-clear"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxInput

PropType

className?string

AttributeType

data-slot"combobox-trigger"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxContent

PropType

className?string

AttributeType

data-slot"combobox-content"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

CSS variableType

--trigger-anchor-pointstring

--trigger-widthstring

ComboboxList

PropType

className?string

AttributeType

data-slot"combobox-list"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxItem

PropType

className?string

AttributeType

data-slot"combobox-item"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxGroup

PropType

className?string

AttributeType

data-slot"combobox-group"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxLabel

PropType

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"combobox-label"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxEmpty

PropType

className?string

AttributeType

data-slot"combobox-empty"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxSeparator

PropType

children?ReactNode

elementType?string

orientation?"horizontal" | "vertical"

style?CSSProperties

className?string

AttributeType

data-slot"combobox-separator"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxChips

PropType

children?ChildrenOrFunction<T>

isDisabled?boolean

isInvalid?boolean

isReadOnly?boolean

role?"group" | "region" | "presentation"

slot?string | null

style?StyleOrFunction<T>

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"combobox-chips"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxChipList

PropType

className?string

AttributeType

data-slot"combobox-chip-list"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxChip

PropType

className?string

AttributeType

data-slot"combobox-chip"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxChipsInput

PropType

children?ReactNode

style?CSSProperties

className?string

AttributeType

data-slot"combobox-chip-input"

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

ComboboxCollection

AttributeType

data-scope"combobox"

data-part"root"

data-invalid?string

data-readonly?string

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

ComboboxEmpty

ComboboxSeparator

ComboboxChips

ComboboxChipList

ComboboxChip

ComboboxChipsInput

ComboboxCollection