MultiSelector

Dropdown that selects multiple options at once. Always controlled via value (option ids) and onChange. The trigger summarizes the current selection as a comma-separated label list.

Examples

Default

Pass options as { id, label }[] and seed value with the selected ids.

import { MultiSelector } from '@var-ui/react';

<MultiSelector label="Teams" options={options} value={value} onChange={setValue} />

Controlled selection

Keep the selected ids in React state and update them from onChange. The trigger text and any app UI that depends on the selection stay in sync.

import { MultiSelector } from '@var-ui/react';
import { useState } from 'react';

const [value, setValue] = useState(['design', 'ops']);

<MultiSelector
  label="Teams"
  description="Selection stays in React state"
  options={options}
  value={value}
  onChange={setValue}
/>

Props

Accessibility

The trigger is a button labeled by the field label plus the current summary text. The popover listbox uses selectionMode="multiple" with checkbox affordances on each item. Keep label visible, and use description / errorMessage (the error message is role="alert") so assistive tech gets the same help and validation copy as sighted users.