Skip to content

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.

Open full source ↗

Props

PropTypeDefaultDescription
label / value / onValueChangestring / string / function—Accessible name and controlled selected value.
optionsChoice[]—Value, label, description and disabled.
placeholder / disabledstring / 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.

Works alongside