MultiSelect

MultiSelect is for filtering, assignment, tagging, and settings where users need to choose more than one option without leaving the current form.

#Default usage

<MultiSelect
  defaultValue={["docs"]}
  options={[
    { label: "Docs", value: "docs" },
    { label: "Design", value: "design" },
    { label: "Engineering", value: "engineering" },
    { label: "Support", value: "support" },
  ]}
  placeholder="Select teams"
/>

#Import

import { MultiSelect } from "@froggdesign/enter-ui-react";

#States

#Accessibility

MultiSelect uses a native input with combobox semantics, a listbox popup, removable chip buttons, and keyboard selection. Provide a visible label through Field or an accessible name with aria-label.

#API

• value, defaultValue, and onValueChange control selected values.
• options accepts { label, value, disabled } items.
• disabled and invalid map to aria state and data attributes.
• placeholder and emptyMessage customize empty copy.
• Supports native div props and className.

#Styling

The outer control uses the shared medium (8px) input radius; selected-value chips remain pill-shaped so they are distinguishable from the field.

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.