Combobox
Search a bounded set of choices and select without leaving the keyboard.
Live — this one is real
Usage
import { useState } from "react";
import { Combobox } from "mizu-ui";
export function Example() {
const [value, setValue] = useState("react");
return (
<Combobox
label="Framework"
value={value}
onValueChange={setValue}
options={[
{
value: "react",
label: "React",
description: "Compose with components",
},
{
value: "next",
label: "Next.js",
description: "React with server rendering",
},
{ value: "vite", label: "Vite", description: "A quick client build" },
]}
/>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect interaction/Combobox.tsx
Source is included in the npm package under src/interaction/Combobox.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label / value / onValueChange | string / string / function | — | Accessible name and controlled selected value. |
| options | Choice[] | — | Value, label, description and disabled. |
| placeholder / disabled | string / boolean | — | Prompt and availability. |
Accessibility
Combobox with listbox and active-descendant relationships. Type filters; arrows wrap, Enter selects, Escape dismisses without changing the value. Disabled choices are excluded.
Motion
CSS transitions explain state changes. Reduced motion removes travel.