MultiSelect

Use MultiSelect

MultiSelect is a named export of @flood-md/react. Connect the package once, then import what you use.

"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