MultiSelect

Pick several items from a popup panel of checkboxes. Real checkbox inputs carry the form name, so selections submit natively. The trigger shows one label, a count, or the placeholder.

Example

Toppings

<MultiSelect
  id="toppings"
  label="Toppings"
  name="toppings"
  options={["Pepperoni", "Mushrooms", "Olives"]}
/>

Props

Prop	Type	Default	Description
`id`	`string`	-	Names Field/panel/message ids (trigger itself carries no id).
`label`	`string`	-	Visible label; also names the trigger and panel.
`name`	`string`	`id`	Checkbox form name; submits every checked value.
`options`	`Array<string \| { value; label; disabled? }>`	-	Selectable items.
`values`	`string[]`	`[]`	Preselected option values.
`placeholder`	`string`	`"Select …"`	Empty-state trigger text; defaults to the lowercased label.
`class`	`string`	-	Style passthrough.
Plus the Field API (hint, error, required, disabled).

Accessibility

Trigger keeps the label in its accessible name, then the state (aria-expanded, aria-controls).
Panel is a named group of real checkboxes — native keyboard and form behavior, no synthetic listbox.
Escape closes the panel; clicking away closes it; Clear unchecks all and keeps focus.