# MultiSelect

Search a collection, choose multiple values and manage them as removable tags.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Field, MultiSelect } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Field label="Frameworks">
        {control => <MultiSelect {...control} name="frameworks" options={[{value:"react",label:"React"},{value:"vue",label:"Vue"},{value:"svelte",label:"Svelte"}]} defaultValue={["react"]} placeholder="Search frameworks" />}
      </Field>
    </FloodRoot>
  );
}
```

## Design notes

- value/defaultValue are arrays of unique nonempty option IDs; onValueChange returns a new array. Native forms submit repeated entries with the same name, never typed query text. Uncontrolled reset restores initial values.
- The shared Combobox search/layer model keeps focus in the input. Enter toggles the active option and the list stays open. Backspace in an empty input removes the last editable tag; a logical backward arrow at the start enters tag actions. Tag arrows, Delete/Backspace, Enter and Escape support keyboard editing.
- Disabled selected options cannot be individually removed or cleared globally. Read-only permits copying but blocks selection and removal. Required means at least one valid selected ID. Translate removeItemLabel and the shared action/empty/validation messages.
- No freeform values, remote fetching, virtualization or arbitrary tag selection engine is supplied. Available in 0.2.5.
- Only the disclosure chevron is shown by default. Set clearable to opt into the extra clear-selection action; individual MultiSelect tags retain their removal buttons.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
| `invalid` | `boolean` | `—` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` |
| `options` | `readonly ComboboxOption[]` | `Required` |
| `clearable` | `boolean` | `false` |
| `emptyMessage` | `string` | `"No results found."` |
| `listLabel` | `string` | `"Options"` |
| `toggleLabel` | `string` | `"Show options"` |
| `clearLabel` | `string` | `"Clear selection"` |
| `invalidSelectionMessage` | `string` | `"Select at least one option."` |
| `value` | `readonly string[]` | `—` |
| `defaultValue` | `readonly string[]` | `[]` |
| `onValueChange` | `(value: string[]) => void` | `—` |
| `removeItemLabel` | `string` | `"Remove"` |
| `Native HTML props` | `Omit<Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "value" \| "defaultValue" \| "onChange" \| "children">, "value" \| "defaultValue" \| "onValueChange">` | `Forwarded` |