Multi Select

The MultiSelect component lets users search, choose, and clear multiple options from one control.

Usage & Examples

Team Filters

2 selected
team-filters.tsx
<MultiSelect
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />

Visual variants

Themes

primary
2 selected
secondary
2 selected
tertiary
2 selected
quaternary
2 selected

States

success
2 selected
warning
2 selected
error
2 selected
info
2 selected

Sizes

xs
2 selected
small
2 selected
medium
2 selected
large
2 selected

Variants

solid
2 selected
outline
2 selected
glass
2 selected

Rounding

none
2 selected
medium
2 selected
large
2 selected

Shadows

none
2 selected
light
2 selected
strong
2 selected
visual-variants.tsx
// Themes
<MultiSelect theme="primary"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect theme="secondary"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect theme="tertiary"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect theme="quaternary"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />

// States
<MultiSelect state="success"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect state="warning"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect state="error"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect state="info"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />

// Sizes
<MultiSelect size="xs"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect size="small"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect size="medium"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect size="large"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />

// Variants
<MultiSelect variant="solid"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect variant="outline"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect variant="glass"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />

// Rounding
<MultiSelect rounding="none"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect rounding="medium"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect rounding="large"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />

// Shadows
<MultiSelect shadow="none"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect shadow="light"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
<MultiSelect shadow="strong"
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />

Interaction states

Disabled
2 selected
Loading
2 selected
interaction-states.tsx
// Disabled
<MultiSelect disabled
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />
// Loading
<MultiSelect loading
    label="Teams"
    defaultValue={["design", "platform"]}
    options={[
      { label: "Design", value: "design" },
      { label: "Platform", value: "platform" },
      { label: "Support", value: "support" },
    ]}
  />

Props API

47 props
Columns
Multi Select props API
Default
Description
aria-describedbystringNoaria—References one or more elements that describe the trigger.
aria-invalidbooleanNoaria—Marks the field as invalid for assistive technology.
aria-labelstringNoaria—Explicit accessible label for the trigger when no visible label is provided.
aria-labelledbystringNoaria—References one or more elements that label the trigger.
aria-requiredbooleanNoaria—Indicates the field is required to assistive technology.
chipClassNamestringNoprops—Additional class name for each selected-value chip.
classNamestringNostyling—Additional class name for the component root.
clearablebooleanNopropstrueWhether to show a clear-all button when values are selected.
clearAriaLabelstringNoprops"Clear selected options"Accessible label for the clear-all button.
containerClassNamestringNoprops—Additional class name for the outer label/component container.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
defaultValuestring[]Noprops[]Initially selected option values for uncontrolled usage.