# MultiSelect

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

- Family: Interaction, imported from `mizu-ui` or `mizu-ui/interaction`
- Docs: https://mizu.user64bit.world/components/multi-select
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/interaction/MultiSelect.tsx

## Usage

```tsx
"use client";

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" },
      ]}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/multi-select
```

## Props

- `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.