Skip to Content
Shadcn ComponentsCombobox

Combobox

An autocomplete input with a filterable list, supporting single and multi-select with badges.

Single Select

Multi Select

Invalid

Installation

npx shadcn@latest add @uipath/combobox

Usage

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxTrigger,
  ComboboxBadgeList,
  ComboboxBadge,
} from "@/components/ui/combobox"

Single Select

const [value, setValue] = useState<string[]>([])
const selectedLabel = frameworks.find((f) => f.value === value[0])?.label
 
<Combobox value={value} onValueChange={setValue}>
  <ComboboxTrigger placeholder="Select a framework...">
    {selectedLabel}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search frameworks..." />
    <ComboboxList>
      <ComboboxEmpty>No results found.</ComboboxEmpty>
      <ComboboxGroup>
        <ComboboxItem value="next">Next.js</ComboboxItem>
        <ComboboxItem value="svelte">SvelteKit</ComboboxItem>
        <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Multi Select

const [values, setValues] = useState<string[]>([])
 
<Combobox multiple value={values} onValueChange={setValues}>
  <ComboboxTrigger className="h-auto min-h-9" placeholder="Select frameworks...">
    {values.length > 0 && (
      <ComboboxBadgeList>
        {values.map((v) => (
          <ComboboxBadge key={v} value={v}>
            {getLabelByValue(v)}
          </ComboboxBadge>
        ))}
      </ComboboxBadgeList>
    )}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search frameworks..." />
    <ComboboxList>
      <ComboboxEmpty>No results found.</ComboboxEmpty>
      <ComboboxGroup>
        <ComboboxItem value="next">Next.js</ComboboxItem>
        <ComboboxItem value="svelte">SvelteKit</ComboboxItem>
        <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Invalid

<Combobox value={value} onValueChange={setValue}>
  <ComboboxTrigger placeholder="Select a framework..." aria-invalid="true">
    {selectedLabel}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search frameworks..." />
    <ComboboxList>
      <ComboboxEmpty>No results found.</ComboboxEmpty>
      <ComboboxGroup>
        <ComboboxItem value="next">Next.js</ComboboxItem>
        <ComboboxItem value="svelte">SvelteKit</ComboboxItem>
        <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
  </ComboboxContent>
</Combobox>
CollapsibleCommand