Multi Select

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

Usage & Examples

Team Filters

Teams

2 selected

team-filters.tsx

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

Props API

Multi Select props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	References one or more elements that describe the trigger.
`aria-invalid`	`boolean`	No	aria	`—`	Marks the field as invalid for assistive technology.
`aria-label`	`string`	No	aria	`—`	Explicit accessible label for the trigger when no visible label is provided.
`aria-labelledby`	`string`	No	aria	`—`	References one or more elements that label the trigger.
`aria-required`	`boolean`	No	aria	`—`	Indicates the field is required to assistive technology.
`chipClassName`	`string`	No	props	`—`	Additional class name for each selected-value chip.
`className`	`string`	No	styling	`—`	Additional class name for the component root.
`clearable`	`boolean`	No	props	`true`	Whether to show a clear-all button when values are selected.
`clearAriaLabel`	`string`	No	props	`"Clear selected options"`	Accessible label for the clear-all button.
`containerClassName`	`string`	No	props	`—`	Additional class name for the outer label/component container.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`defaultValue`	`string[]`	No	props	`[]`	Initially selected option values for uncontrolled usage.