Menu

Combobox

Searchable select with listbox. 2 states.

Installation

$ npx uix-ui@latest add combobox

This copies the file into components/ui/combobox.tsx in your project. npx shadcn@latest add @uix/combobox works too.

Usage

combobox.tsx
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

PropTypeDefaultDescription
labelReact.ReactNode–
secondaryLabelReact.ReactNode–Right-aligned note next to the label, for example "Optional".
feedbackReact.ReactNode–Message under the field.
helperReact.ReactNode–Same as feedback.
errorstring–Error message; also marks the field invalid and replaces the feedback.
optionsComboboxOption[]–The choices.
valuestring–Selected value (controlled).
defaultValuestring–
onValueChange(value: string) => void–
placeholderstring–
emptyTextstring"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-authority
  • clsx
  • tailwind-merge
  • lib/utils.ts
  • components/ui/icons.tsx
esc

↑↓ to navigate · ↵ to select · esc to close