Docs
Combobox
Combobox
Combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
import {
Combobox,
ComboboxContent,
ComboboxInput,
ComboboxItem,
ComboboxTrigger,
} from "@repo/tailwindcss/default/combobox";
const ALL_OPTIONS = ["Next.js", "Astro", "Qwik", "SolidStart", "Nuxt.js"];
const ComboboxDemo = () => {
return (
<Combobox
options={ALL_OPTIONS}
placeholder="Search framework…"
itemComponent={(props) => (
<ComboboxItem item={props.item}>{props.item.rawValue}</ComboboxItem>
)}
>
<ComboboxTrigger>
<ComboboxInput />
</ComboboxTrigger>
<ComboboxContent />
</Combobox>
);
};
export default ComboboxDemo;import {
Combobox,
ComboboxContent,
ComboboxInput,
ComboboxItem,
ComboboxTrigger,
} from "@repo/tailwindcss/solid/combobox";
const ALL_OPTIONS = ["Next.js", "Astro", "Qwik", "SolidStart", "Nuxt.js"];
const ComboboxDemo = () => {
return (
<Combobox
options={ALL_OPTIONS}
placeholder="Search framework…"
itemComponent={(props) => (
<ComboboxItem item={props.item}>{props.item.rawValue}</ComboboxItem>
)}
>
<ComboboxTrigger>
<ComboboxInput />
</ComboboxTrigger>
<ComboboxContent />
</Combobox>
);
};
export default ComboboxDemo;Installation
npx shadcn-solid@latest add comboboxInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
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>