Multi Select

Select with selectionMode="multiple": the popover stays open while toggling options.

Import

import { MultiSelect, MultiSelectItem } from '@marbleui/ui'

Props

<MultiSelect>

Prop	Type	Default	Description
children *required	`ReactNode`	`—`
description	`ReactNode`	`—`
display	`'chips' \| 'count'`	`'chips'`	How selected values show in the trigger.
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
items	`Iterable<T>`	`—`
label	`ReactNode`	`—`
variant	`FieldVariant`	`—`

Also accepts React Aria props (107).

<MultiSelectItem>

No props of its own.

Also accepts React Aria props (101).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Select · React Aria SelectValue. Follow the primitive's docs for the full keyboard map.

Usage notes

Select that allows several options; the popover stays open while you toggle. For one choice use Select; for a short always-visible list use CheckboxGroup; for free-form entries use TagsInput.

<MultiSelect label="Labels" placeholder="Add labels" items={labels} defaultValue={['bug', 'design']}>
  {(l) => <MultiSelectItem id={l.id}>{l.name}</MultiSelectItem>}
</MultiSelect>

Value is an array of item ids. Uncontrolled: defaultValue. Controlled: value + onChange.
display is chips (default) or count. With more than 3 selections it falls back to “N selected” either way.
Chip text comes from each item’s name field, falling back to its id, so items given as objects should have a name.
Without a visible label, pass aria-label.

Example source · show

import { MultiSelect, MultiSelectItem } from './multi-select'

const labels = [
  { id: 'bug', name: 'Bug' },
  { id: 'feature', name: 'Feature' },
  { id: 'design', name: 'Design' },
  { id: 'docs', name: 'Docs' },
  { id: 'perf', name: 'Performance' },
]

export const styles = {
  Chips: () => (
    <MultiSelect className="w-72" label="Labels" placeholder="Add labels" items={labels} defaultValue={['bug', 'design']}>
      {(l) => <MultiSelectItem id={l.id}>{l.name}</MultiSelectItem>}
    </MultiSelect>
  ),
  Count: () => (
    <MultiSelect className="w-72" variant="filled" display="count" label="Columns" items={labels} defaultValue={['bug', 'feature', 'docs']}>
      {(l) => <MultiSelectItem id={l.id}>{l.name}</MultiSelectItem>}
    </MultiSelect>
  ),
}

Source: packages/ui/src/multi-select/multi-select.tsx

Catalog

Category: selection
Priority: Core
Primitive: react-aria
React Aria: Select (selectionMode="multiple")
Base UI: Select (multiple)