Combobox
Searchable select with listbox. 2 states.
import * as React from "react";
import { Combobox } from "@/components/ui/combobox";
export default function Example() {
const [value, setValue] = React.useState("");
return (
<div style={{ width: 320, maxWidth: "100%" }}>
<Combobox
label="District"
placeholder="Start typing"
value={value}
onValueChange={setValue}
options={[
{ value: "dhaka", label: "Dhaka" },
{ value: "chattogram", label: "Chattogram" },
{ value: "sylhet", label: "Sylhet" },
{ value: "rajshahi", label: "Rajshahi" },
{ value: "khulna", label: "Khulna" },
]}
/>
</div>
);
}
Installation
$ npx uix-ui@latest add comboboxThis copies the file into components/ui/combobox.tsx in your project. npx shadcn@latest add @uix/combobox works too.
Usage
import { Combobox } from "@/components/ui/combobox";
<div style={{ width: 320, maxWidth: "100%" }}>
<Combobox
label="District"
placeholder="Start typing"
value={value}
onValueChange={setValue}
options={[
{ value: "dhaka", label: "Dhaka" },
{ value: "chattogram", label: "Chattogram" },
{ value: "sylhet", label: "Sylhet" },
{ value: "rajshahi", label: "Rajshahi" },
{ value: "khulna", label: "Khulna" },
]}
/>
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | React.ReactNode | – | |
secondaryLabel | React.ReactNode | – | Right-aligned note next to the label, for example "Optional". |
feedback | React.ReactNode | – | Message under the field. |
helper | React.ReactNode | – | Same as feedback. |
error | string | – | Error message; also marks the field invalid and replaces the feedback. |
options | ComboboxOption[] | – | The choices. |
value | string | – | Selected value (controlled). |
defaultValue | string | – | |
onValueChange | (value: string) => void | – | |
placeholder | string | – | |
emptyText | string | "No results found." | Shown when the search matches nothing. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx