Forms

Combobox

Searchable single-select with autocomplete.

Import

tsx

import { Combobox } from "@cooud-ui/ui";

bash

npx cooud-ui add combobox

Examples

Single select

A searchable, single-value picker built on Command inside a Popover.

Framework

Search and pick a single framework.

tsx

const frameworkOptions = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "nuxt", label: "Nuxt" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "solidstart", label: "SolidStart", disabled: true },
];

function ComboboxDemo() {
  const [framework, setFramework] = useState<string>();

  return (
    <Field className="max-w-xs">
      <FieldLabel id="framework-label">Framework</FieldLabel>
      <Combobox
        options={frameworkOptions}
        value={framework}
        onValueChange={setFramework}
        placeholder="Select a framework…"
        searchPlaceholder="Search frameworks…"
        aria-labelledby="framework-label"
      />
      <FieldDescription>
        {framework
          ? `Selected: ${frameworkOptions.find((o) => o.value === framework)?.label}`
          : "Search and pick a single framework."}
      </FieldDescription>
    </Field>
  );
}

API Reference

Generated from the component's exported types.

ComboboxProps

Prop	Type	Default	Description
`options`*	`ComboboxOption[]`	—	The list of selectable options.
`value`	`string`	—	Controlled selected value. Pair with `onValueChange`.
`defaultValue`	`string`	—	Initial value for uncontrolled usage.
`onValueChange`	`(value: string) => void`	—	Called with the new value when the selection changes.
`placeholder`	`string`	`"Select an option…"`	Text shown on the trigger when nothing is selected.
`searchPlaceholder`	`string`	`"Search…"`	Placeholder for the search input inside the popover.
`emptyText`	`string`	`"No results found."`	Message rendered when no option matches the search.
`disabled`	`boolean`	`false`	Disables the trigger entirely.
`className`	`string`	—	Extra classes for the trigger button.
`contentClassName`	`string`	—	Extra classes for the popover content.
`aria-label`	`string`	—	Accessible name for the trigger when there is no visible label.
`aria-labelledby`	`string`	—	ID of an element labelling the trigger.