Combobox

Searchable, optionally creatable combobox — type to filter, Enter to pick or create.

A searchable, optionally creatable combobox. Type to filter the options by label or value, press Enter to pick the top match — and, when allowCustom is on (the default), to create a brand-new value that isn't in the list. It's controlled: pass value and onChange. For a fixed list without free text see CustomSelect; for the Radix-based listbox see Select.

Import

import { Combobox } from "@yuhuanowo/yunui";

Usage

Combobox is controlled — wire value and onChange to state:

const [value, setValue] = useState("next");

<Combobox
  value={value}
  onChange={setValue}
  placeholder="Pick or type a framework…"
  options={[
    { value: "next", label: "Next.js", description: "React framework" },
    { value: "remix", label: "Remix", description: "Full-stack web" },
    { value: "astro", label: "Astro", description: "Content-first" },
    { value: "svelte", label: "SvelteKit", description: "Compiler-based" },
  ]}
/>

Example

Searchable & creatable

Props

Prop	Type	Default	Description
allowCustom	boolean	true	Allow entering a value not in `options` (creatable).
className	string	—
creatableFilter	((input: string) => boolean)	—	When set, the "create new" row only appears for inputs passing this test.
creatableIcon	ReactNode	—	Glyph shown on the "create new" row (default `+`).
creatableText	string	—	Label template for the "create new" row; `{value}` is replaced with the typed text.
disabled	boolean	false	Disable interaction and dim the control.
onChange*	(value: string) => void	—	Called with the chosen (or newly created) value.
options*	ComboboxOption[]	—	The selectable options.
placeholder	string	—	Placeholder for the input (falls back to i18n default).
value*	string	—	Currently selected value (controlled).

Import

Usage

Example

Props

On this page