MultiSelect

Multi-choice picker that renders selected options as removable chips, with select-all.

MultiSelect lets the user pick several values from an options list, showing the selections as removable chips in the trigger. It is controlled: value is an array and onChange returns the updated array. Options share the Combobox ComboboxOption shape (value, label, optional description/icon). Cap the visible chips with maxBadgeCount, and enable a select-all/clear-all control with showSelectAll.

Example

Preview

import { MultiSelect } from '@officina/ui';
import { useState } from 'react';

function TagPicker() {
  const [value, setValue] = useState<string[]>(['design']);
  return (
    <MultiSelect
      value={value}
      onChange={setValue}
      showSelectAll
      maxBadgeCount={3}
      placeholder="Select tags…"
      options={[
        { value: 'design', label: 'Design' },
        { value: 'eng', label: 'Engineering' },
        { value: 'ops', label: 'Operations' },
      ]}
    />
  );
}

API

Prop	Type	Default	Description
onChange*	(value: T[]) => void	—	Called with the updated selection.
options*	ComboboxOption<T>[]	—	Selectable options.
value*	T[]	—	Currently selected values.
chipsClassName	string	—
clearAllLabel	string	—	Label for the clear-all control.
disabled	boolean	—
emptyMessage	string	—	Message shown when no options match.
invalid	boolean	—	Marks the field invalid for validation styling and `aria-invalid`.
maxBadgeCount	number	—	Max chips to render before collapsing into a "+N" badge.
name	string	—	Form field name, for native form submission / form libraries.
placeholder	string	—
selectAllLabel	string	—	Label for the select-all control.
showSelectAll	boolean	—	Show a "select all" control.
size	enum	—	Control size.

Example

API

On this page