Skip to content

MultiSelect

Filter a set, keep several choices and make the selection limit clear.

Live — this one is real

Release checks1 selected
Release checks

Choose up to 3.

Usage

import { useState } from "react";
import { MultiSelect } from "mizu-ui";

export function Example() {
  const [value, setValue] = useState(["types"]);
  return (
    <MultiSelect
      label="Release checks"
      value={value}
      onValueChange={setValue}
      max={3}
      options={[
        { value: "types", label: "Types" },
        { value: "lint", label: "Lint" },
        { value: "tests", label: "Tests" },
        { value: "browser", label: "Browser review" },
      ]}
    />
  );
}

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/MultiSelect.tsx

Source is included in the npm package under src/interaction/MultiSelect.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
label / value / onValueChangestring / string[] / function—Name and controlled selected values.
options / maxChoice[] / number—Choices and optional capacity.

Accessibility

Native disclosure and checkboxes. Selected choices stay removable when capacity is reached. Escape restores the disclosure trigger; pointer outside closes.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside