Combobox

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

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

Usage

Combobox is controlled — wire value and onChange to state:

1const [value, setValue] = useState("next");
2 
3<Combobox
4  value={value}
5  onChange={setValue}
6  placeholder="Pick or type a framework…"
7  options={[
8    { value: "next", label: "Next.js", description: "React framework" },
9    { value: "remix", label: "Remix", description: "Full-stack web" },
10    { value: "astro", label: "Astro", description: "Content-first" },
11    { value: "svelte", label: "SvelteKit", description: "Compiler-based" },
12  ]}
13/>

Example

A clear (×) button appears once a value is set — the demo above shows it on the right. Pass clearable={false} to suppress it when the field must always hold a value.

Props