Shadcn Combobox Components

Autocomplete input and command palette with a list of suggestions. All combobox variants are designed for compatibility with Radix UI and Base UI. Browse our collection of 12 Shadcn Combobox variants.

Content area expanding based on input area

Multi-select

Grouped

With icons

With descriptions

With disabled items

Scrollable with many items

With loading state

With clear button

With recent selections

With button

PreviousCheckbox

NextField

Unlock premium components

Get full control of shadcn/ui components, blocks and instances, including future additions.

Unlock Now

Explore Shadcn Blocks

Ready-made page sections built with the same components.

Shadcn Combobox Component

The Shadcn Combobox is a searchable select: a button that opens a list of options with a search field on top. It is the right choice when a list is too long to scan, such as countries, frameworks or team members, because users can type a few letters and pick the match instead of scrolling.

Whether you need a single searchable picker or a multi-select that shows removable badges, the shadcn combobox examples here cover it, along with grouped options, recent selections, disabled items, long scrollable lists and a loading state. Following the shadcn/ui pattern, each one combines the Radix UI Popover with the Command component, which is powered by cmdk for filtering and keyboard navigation, and is styled with Tailwind CSS in React.

What is the Shadcn Combobox Component?

In these examples a React combobox is not a single component but a composition. A Button with role="combobox" acts as the trigger and shows the current value. Clicking it opens a Popover that contains a Command list: an input that filters as you type, the matching items, and a message when nothing matches. Selecting an item stores its value in React state and closes the popover.

Use a combobox when the value must be one of the listed options and the list is long enough to need search. For five or six options a Select is simpler, and when users may type a value that is not in the list, use an Autocomplete instead.

Anatomy of the Shadcn Combobox

Part	Description
Popover	The Radix UI root that holds the open state. The examples control it with `open` and `onOpenChange` so the list closes after a selection.
PopoverTrigger	Wraps the trigger `Button` with `asChild`. The button carries `role="combobox"` and `aria-expanded`.
PopoverContent	The floating panel. The examples remove its padding and can match its width to the trigger.
Command	The cmdk root that filters and ranks items. Set `shouldFilter={false}` when you filter the data yourself.
CommandInput	The search field at the top of the list, with a search icon.
CommandList	The scrollable container for groups, items and the empty message.
CommandEmpty	Rendered automatically when no item matches the search.
CommandGroup, CommandItem, CommandSeparator	Groups with an optional `heading`, the selectable options with an `onSelect` callback, and a divider between sections.

12 Shadcn Combobox Variants

Each combobox variant listed here is previewed live at the top of this page, together with its source code and install command.

Basic and full width content: A framework picker with a check mark on the selected option, plus a version whose list matches the trigger width.
Multi-select: Selected options appear as removable badges inside the trigger, and the list stays open while you pick.
Grouped and with recent selections: Options split under group headings, and a Recent group that keeps the last three picks at the top.
With icons and descriptions: Each option shows a leading icon or a second line of muted text for extra context.
With disabled items: Locked options stay visible with a lock icon but cannot be selected.
Scrollable with many items: A country picker with 30 options inside a scrollable list, where search does most of the work.
With loading state: Turns off the built-in filter, simulates a remote search and shows a spinner while results load.
With clear button: An X button in the trigger that resets the value without opening the list.
With button: A full width trigger with a muted placeholder, a list aligned to the trigger width and a New framework button below a separator.

How to Install the Shadcn Combobox Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a combobox variant by its name:

npx shadcn@latest add @shadcnuikit/combobox1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Combobox Component

Keep the open state and the selected value in React state. Each CommandItem calls onSelect with its value, where you update the selection and close the popover.

"use client"

import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const frameworks = [
  { value: "next.js", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export function FrameworkCombobox() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("")

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-52 justify-between"
        >
          {frameworks.find((f) => f.value === value)?.label ??
            "Select framework..."}
          <ChevronsUpDown className="opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-52 p-0">
        <Command>
          <CommandInput placeholder="Search framework..." />
          <CommandList>
            <CommandEmpty>No framework found.</CommandEmpty>
            <CommandGroup>
              {frameworks.map((f) => (
                <CommandItem
                  key={f.value}
                  value={f.value}
                  onSelect={(current) => {
                    setValue(current === value ? "" : current)
                    setOpen(false)
                  }}
                >
                  {f.label}
                  <Check
                    className={cn(
                      "ml-auto",
                      value === f.value ? "opacity-100" : "opacity-0"
                    )}
                  />
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}

Why Use the Shadcn Combobox Component

Fast on long lists: Users find an option by typing instead of scrolling through dozens of entries.
Only valid values: The value always comes from the list, so there are no typos or unknown entries to validate.
Keyboard friendly: cmdk handles arrow key navigation and Enter to select, and Radix UI handles focus and Escape to close.
Composable: Because it is built from Popover and Command, adding groups, icons, badges or actions is just more JSX.
Themed automatically: All parts use your theme variables, so the combobox matches your buttons and inputs in light and dark mode.

Common Combobox Use Cases

Country and timezone pickers: Long, well known lists where typing the first letters is faster than scrolling.
Assignees and owners: Pick a user or team in task managers, CRMs and admin panels.
Tag and category selection: The multi-select variant with badges suits labels, skills and categories.
Framework or plan selection: Settings forms where each option needs an icon or a short description.
Remote data: Search customers, products or repositories from an API with a loading state.
Table filters: Filter a data table column by status, owner or project.

Customizing the Shadcn Combobox

Match the list width to the trigger by giving PopoverContent the Radix width variable, style the trigger with any Button variant, and render icons, avatars or descriptions inside each CommandItem. For server side search, set shouldFilter={false} on Command, control the input with value and onValueChange, and render the results you fetched.

<PopoverContent className="w-(--radix-popover-trigger-width) p-0">
  <Command shouldFilter={false}>
    <CommandInput value={search} onValueChange={setSearch} />
    <CommandList>{/* fetched items */}</CommandList>
  </Command>
</PopoverContent>

Combobox Accessibility and Keyboard Support

The trigger button uses role="combobox" and aria-expanded so screen readers announce it as a collapsible list. Radix UI moves focus into the popover and returns it to the trigger on close, and cmdk marks the highlighted item with aria-selected. Pair the trigger with a visible label that points to the button id, and give icon-only clear buttons an aria-label.

Key	Action
`Enter`	Opens the list from the trigger, or selects the highlighted item.
`Space`	Opens the list when the trigger has focus.
`ArrowDown`	Highlights the next item.
`ArrowUp`	Highlights the previous item.
`Home`	Highlights the first item.
`End`	Highlights the last item.
`Escape`	Closes the list and returns focus to the trigger.

Combobox Best Practices

Show a clear placeholder in the trigger, such as Select framework, when nothing is selected.
Close the popover after a single selection, but keep it open in multi-select mode.
Always include a CommandEmpty message so users know the search found nothing.
Set shouldFilter={false} and show a spinner when results come from an API.
Group long lists and keep recent or popular options at the top.
For fewer than seven options, use a Select or a Radio Group instead.

Components Related to Combobox

Shadcn CommandThe searchable list that powers every combobox.Shadcn PopoverThe floating panel that opens under the trigger.Shadcn AutocompleteSuggestions for free text instead of a fixed value.Shadcn SelectA simpler dropdown for short lists without search.

Shadcn Combobox FAQ

Combine a Popover with the Command component. Use a Button with role="combobox" inside PopoverTrigger, and put Command, CommandInput, CommandList, CommandEmpty and CommandItem inside PopoverContent. Store the selected value and the open state in React state.

Store the selection as an array. In onSelect, add the value if it is missing or remove it if it is already selected, and do not close the popover. Show the selected values as removable Badge components inside the trigger button.

Give PopoverContent the width of the Radix trigger variable, for example className="w-(--radix-popover-trigger-width) p-0". The list then always matches the button, whatever its width.

Set shouldFilter={false} on Command, control CommandInput with value and onValueChange, and fetch results in an effect with a short debounce. Show a spinner while loading and render the fetched items as CommandItem elements.

Render a small button with an X icon when a value is selected. In its click handler call event.stopPropagation() so the popover does not open, then reset the value to an empty string. Give that button an aria-label such as Clear selection, and prefer placing it next to the trigger rather than inside it, because a button nested in another button is invalid HTML.

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.