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

Usage

import {
  Combobox,
  ComboboxItem,
  ComboboxTrigger,
  ComboboxContent
} from "@/components/ui/combobox";
import { createFilter } from "@kobalte/core";
import { createSignal } from "solid-js";

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