shadcn-solid

Docs

Combobox

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

Installation

pnpm dlx shadcn-solid@latest add combobox

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>

Collapsible Command