PrimitiveAvailable

Combobox

Searchable single selection with a keyboard-operated listbox.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/combobox.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
  ComboboxEmpty,
} from '@/components/ui/combobox';

export default function Demo() {
  const items = ['React', 'Vue', 'Svelte', 'Angular'];
  return (
    <Combobox items={items}>
      <ComboboxInput
        aria-label="Choose a framework"
        placeholder="Search frameworks"
      />
      <ComboboxContent>
        <ComboboxEmpty>No framework found.</ComboboxEmpty>
        <ComboboxList>
          {(item: string) => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Check closed, open, highlighted, selected and disabled states where supported.
Dialogs and menus must open from the keyboard. Escape closes non-persistent overlays and returns focus to the trigger. Tooltips and hover cards must also appear on focus.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
items	array	—	Items available for filtering and selection.
value	item or null	uncontrolled	Controlled selection.
onValueChange	function	—	Reports selection changes.

Accessibility

Rules that should remain intact when adapting the component to a product.

Name the input and provide an empty-results message. Preserve listbox option semantics.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.