HelpTribe.

Combobox

Searchable dropdown combobox with keyboard navigation, search filtering, and animated dropdown. Inspired by shadcn/ui.

Installation

$ npx shadcn@latest add combobox

Preview

With Icons

Usage (React/TSX)

import { Combobox } from "@/components/ui/combobox"

const priorities = [
  { value: "low", label: "Low" },
  { value: "medium", label: "Medium" },
  { value: "high", label: "High" },
];

export default function TaskForm() {
  const [priority, setPriority] = React.useState("");
  return (
    <Combobox
      items={priorities}
      value={priority}
      onValueChange={setPriority}
      placeholder="Select priority..."
    />
  )
}

Props

PropTypeDefaultDescription
itemsComboboxItem[]—Array of items with value, label, and optional icon.
valuestring—Currently selected value.
onValueChange(value: string) => void—Callback when selection changes.
placeholderstring"Select item..."Placeholder text when nothing is selected.
searchPlaceholderstring"Search..."Placeholder for the search input.
emptyMessagestring"No results found."Message shown when no items match search.
widthstring"w-[300px]"Width of the combobox.
classNamestring—Additional CSS classes.

ComboboxItem

PropTypeDefaultDescription
valuestring—Unique value for the item.
labelstring—Display label for the item.
iconReactNode—Optional icon element.

Keyboard Navigation

  • ↑ ↓ to navigate items
  • Enter to select
  • Escape to close
  • Type to search and filter items