Components/Inputs/Combobox

Combobox

Inputs

Filterable dropdown combining a text input with a popover list.

Single-value picker that opens a text search field to filter options in real time. Options support extra keywords for non-obvious matches (e.g. searching "edgar" matches a "SEC filings" option).

Usage

import { Combobox } from "nosible-ux"

const options = [
  { value: "us", label: "United States" },
  { value: "gb", label: "United Kingdom" },
  { value: "de", label: "Germany" },
]

export default function Example() {
  return <Combobox options={options} value={null} placeholder="Select country" />
}

Examples

With keyword synonyms

Accessibility

Backed by cmdk. Keyboard navigation, type-ahead filtering, and empty state are handled. The trigger announces the selected value or placeholder.

Props

Name	Type	Default	Description
`className`	`string \| undefined`	—	Additional className applied to the trigger button.
`onChange`	`((next: string \| null) => void) \| undefined`	—	Called when the selection changes.
`onSearchChange`	`((next: string) => void) \| undefined`	—	Called when the search query changes.
`open`	`boolean \| undefined`	—	Demo-only: force the panel open and render it inline (no portal).
`options`	`ComboboxOption[]`	—	The list of options to display.
`placeholder`	`string \| undefined`	—	Placeholder shown in the trigger when nothing is selected. Default: `"Select…"`.
`search`	`string \| undefined`	—	Controlled search query. When provided, takes over the internal input state.
`searchPlaceholder`	`string \| undefined`	—	Placeholder inside the search input. Default: `"SEARCH"`.
`size`	`"sm" \| "md" \| "lg" \| undefined`	—	Trigger height tier. Default: `"md"`.
`value`	`string \| null`	—	Currently selected value. Pass `null` to clear.

← All Components Getting Started →