MultiSelect
Filter a set, keep several choices and make the selection limit clear.
Live — this one is real
Release checks1 selected
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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label / value / onValueChange | string / string[] / function | — | Name and controlled selected values. |
| options / max | Choice[] / 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.