MultiSelect

Selection and disabled options

Sensor sources

Select every source to include.

RadarOpticalSonar

Unavailable source selection

Remote

const [sources, setSources] = useState<string[]>(["radar"]);
 
<MultiSelect
  label="Sensor sources"
  options={[
    { value: "radar", label: "Radar" },
    { value: "optical", label: "Optical" },
    { value: "sonar", label: "Sonar", disabled: true },
  ]}
  value={sources}
  onValueChange={setSources}
  name="source"
/>;

Use a short set of visible choices. Each value must be unique and stable. Omit value and use defaultValue for uncontrolled selection. A controlled value changes only when the owner supplies the callback result. Values missing from the current options survive edits, which supports filtered or temporarily unavailable choices.

name uses native checkbox form submission: one value per checked, enabled option. Values absent from the options do not submit through the DOM. Supply error for a visible, associated validation message, announced as an alert. disabled disables the whole group; individual options can also be disabled.

Props

PROP	TYPE	DEFAULT	REQUIRED
`label` Visible fieldset legend and accessible group name.	`string`	—	yes
`options` Unique stable values. Disabled options remain visible.	`array`	—	yes
`value` Controlled selected values; values missing from options are preserved during changes.	`array`	—	no
`defaultValue` Initial values for uncontrolled selection. Defaults to an empty array.	`array`	—	no
`onValueChange` (values: string[]) => void. Controlled state only changes when the owner supplies new values.	`function`	—	no
`name` Native form name shared by selected checkboxes. FormData returns one entry per selected, enabled option.	`string`	—	no
`disabled`	`boolean`	`false`	no
`description`	`string`	—	no
`error` Visible validation text; associated with the group and paired with aria-invalid.	`string`	—	no

Accessibility

A native fieldset and legend name the group; every option is a labeled checkbox.
Tab visits enabled options, and Space changes selection. Each checkbox has a 24px target and visible focus.
A visible checkmark communicates selection independently of color. Native checked/disabled states remain available in forced colors.
Error text is associated with the group and aria-invalid; no nested listbox keyboard model is required.
The legend keeps the case it is written in; the legend, description, option names and message wrap, and long identifiers break anywhere.
Each checkbox uses the control outline (--oprt-border-control, 3:1 or more); the group's own border stays a quiet grouping line.

Manifest entry

<MultiSelect label="Sensors" options={[{ value: "radar", label: "Radar" }, { value: "optical", label: "Optical" }]} value={sensors} onValueChange={setSensors} />

View agent manifest

{
  "description": "Native checkbox group with shared OPERATOR Check icons, stable values, labeled options, and explicit validation.",
  "props": {
    "label": {
      "type": "string",
      "required": true,
      "description": "Visible fieldset legend and accessible group name."
    },
    "options": {
      "type": "array",
      "items": {
        "value": "string (required, unique)",
        "label": "string (required)",
        "disabled": "boolean"
      },
      "required": true,
      "description": "Unique stable values. Disabled options remain visible."
    },
    "value": {
      "type": "array",
      "description": "Controlled selected values; values missing from options are preserved during changes."
    },
    "defaultValue": {
      "type": "array",
      "description": "Initial values for uncontrolled selection. Defaults to an empty array."
    },
    "onValueChange": {
      "type": "function",
      "description": "(values: string[]) => void. Controlled state only changes when the owner supplies new values."
    },
    "name": {
      "type": "string",
      "description": "Native form name shared by selected checkboxes. FormData returns one entry per selected, enabled option."
    },
    "disabled": {
      "type": "boolean",
      "default": false
    },
    "description": {
      "type": "string"
    },
    "error": {
      "type": "string",
      "description": "Visible validation text; associated with the group and paired with aria-invalid."
    }
  },
  "composable_with": [
    "Card"
  ],
  "never_inside": [
    "Button"
  ],
  "example": "<MultiSelect label=\"Sensors\" options={[{ value: \"radar\", label: \"Radar\" }, { value: \"optical\", label: \"Optical\" }]} value={sensors} onValueChange={setSensors} />"
}

MultiSelect

Selection and disabled options

Props

Accessibility

Manifest entry

On this page