Multi-select

MultiSelect composes Select + Tag: pick from a dropdown, selected items render below as removable Tag chips. Use whenever a user can pick more than one option from a known set.

Use it for

• Service category selection (Brand Design + Marketing + Content)
• Tag/label assignment on a record
• Multi-region or multi-tenant scoping
• Any "pick N from M" choice with a visible-set affordance

For single-pick, use Select. For free-form tag entry where users type new values, use AddableTagList.

Import

import { MultiSelect } from '@brikdesigns/bds';

Variants

Default

import { useState } from 'react';

const [selected, setSelected] = useState<string[]>([]);

<MultiSelect
  label="Services"
  placeholder="Select services..."
  options={[
    { label: 'Brand Design', value: 'brand' },
    { label: 'Marketing', value: 'marketing' },
    { label: 'Product Design', value: 'product' },
  ]}
  value={selected}
  onChange={setSelected}
/>

Sizes

<MultiSelect size="sm" {...props} />
<MultiSelect size="md" {...props} />
<MultiSelect size="lg" {...props} />

Error state

<MultiSelect
  label="Required services"
  error="Please select at least one"
  options={options}
  value={selected}
  onChange={setSelected}
/>

Tag size override

By default selected-item tags match the dropdown size. Override with tagSize for a tighter pill cluster.

<MultiSelect size="md" tagSize="sm" {...props} />

When not to use

• Don't use MultiSelect for ≤3 options. Use Checkbox groups — the choices are visible at all times.
• Don't use MultiSelect when users need to enter new tags. Free-form tag entry belongs in AddableTagList.

Accessibility

• Renders a <select multiple> (visually hidden) plus the rendered Tag list. Keyboard navigation matches the native multi-select.
• Each selected Tag carries a Remove {label} accessible name on its dismiss button.
• aria-invalid on the underlying select when error is present.

API

Related

• Select — single-pick sibling
• Tag — the chip rendered for each selection
• Storybook playground