Combobox

Combines a text input with a listbox, allowing users to filter a list of options to items matching a query.

Docs API Reference

Component combobox-demo not found in registry.

Installation

Copy and paste the following code into your project:

Usage

import { createSignal } from "solid-js"
import { createFilter } from "@kobalte/core"
 
import {
  Combobox,
  ComboboxContent,
  ComboboxItem,
  ComboboxTrigger,
} from "@/components/ui/combobox"
const ALL_OPTIONS = ["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]
 
const filter = createFilter({ sensitivity: "base" })
const [options, setOptions] = createSignal(ALL_OPTIONS)
const onInputChange = (value: string) => {
  setOptions(ALL_OPTIONS.filter((option) => filter.contains(option, value)))
}
<Combobox
  options={options()}
  onInputChange={onInputChange}
  itemComponent={(props) => (
    <ComboboxItem item={props.item}>{props.item.rawValue}</ComboboxItem>
  )}
>
  <ComboboxTrigger>
    <ComboboxInput />
  </ComboboxTrigger>
  <ComboboxContent />
</Combobox>

Examples

Disabled

Component combobox-disabled-demo not found in registry.

Error

Component combobox-error-demo not found in registry.

Group

Component combobox-group-demo not found in registry.

Multi

Component combobox-multi-demo not found in registry.

CollapsibleCommand