MultiSelect

Multi-select dropdown field with checkbox-style options.

Examples

Default

Columns

2 selected

Clear Columns

Name

Email

Role

Status

<MultiSelectStory {...args} />

Searchable

Columns

2 selected

Clear Columns

Name

Email

Role

Status

<MultiSelectStory {...args} />

Badges

Columns

NameEmail

Clear Columns

Name

Email

Role

Status

<MultiSelectStory {...args} />

Labels

Columns

Name, Email

Clear Columns

Name

Email

Role

Status

<MultiSelectStory {...args} />

Disabled Options

Columns

2 selected

Clear Columns

Name

Email

Role

Status

<MultiSelectStory {...args} />

Sections And Dividers

Columns

2 selected

Clear Columns

Identity

Name

Email

Account

Role

Status

<MultiSelectStory {...args} />

Disabled

Columns

2 selected

Name

Email

Role

Status

<MultiSelectStory {...args} />

Loading

Columns

2 selected

Clear Columns

Name

Email

Role

Status

<MultiSelectStory {...args} />

Validation Status

Columns

2 selected

Clear Columns

Name

Email

Role

Status

Choose at least one column.

<MultiSelectStory {...args} />

Custom Options

Columns

2 selected

Namename.field

Emailemail.field

Rolerole.field

Statusstatus.field

<CustomOptionsStory {...args} />

With Description And Tooltip

Columns

These settings only affect your current view.

Choose which columns are visible in the table.

2 selected

Clear Columns

Name

Email

Role

Status

<MultiSelectStory {...args} />

Badge Overflow

Columns

NameEmail+2

Clear Columns

Name

Email

Role

Status

<OverflowBadgesStory {...args} />

Select All

Columns

Select columns

Select all

Name

Email

Role

Status

<EmptyMultiSelectStory {...args} />

API

MultiSelect

Multi-select dropdown field with checkbox-style options.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
children	(option: MultiSelectOptionData) => ReactNode	—	Custom render function for selectable options.
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the combobox button.
description	ReactNode	—	Supporting text displayed below the label.
hasClear	boolean	false	Whether to show a clear button when values are selected.
hasSearch	boolean	false	Whether to show search input in the dropdown.
hasSelectAll	boolean	false	Whether to show a select-all option.
isDefaultOpen	boolean	false	Whether the selector starts open.
isDisabled	boolean	false	Whether the selector is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the selector is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxBadges	number	3	Maximum number of badges before showing an overflow count.
onChange*	(value: string[]) => void	—	Called when selection changes.
options*	ReadonlyArray<MultiSelectOption>	—	Options to display.
placeholder	string	'Select...'	Placeholder shown when no values are selected.
ref	Ref<HTMLButtonElement>	—	Ref forwarded to the combobox button.
searchPlaceholder	string	'Search...'	Search input placeholder.
selectAllLabel	string	'Select all'	Select-all option label.
size	"sm" | "md" | "lg"	'md'	Select size.
startIcon	IconComponent	—	Start icon rendered in the trigger.
status	InputStatus	—	Validation status displayed below the selector.
style	CSSProperties	—	Inline styles applied to the field root.
triggerDisplay	"count" | "labels" | "badges"	'count'	How selected items are summarized in the trigger.
value*	string[]	—	Selected option values.
isOptional	false	—
isRequired	false	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
children	(option: MultiSelectOptionData) => ReactNode	—	Custom render function for selectable options.
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the combobox button.
description	ReactNode	—	Supporting text displayed below the label.
hasClear	boolean	false	Whether to show a clear button when values are selected.
hasSearch	boolean	false	Whether to show search input in the dropdown.
hasSelectAll	boolean	false	Whether to show a select-all option.
isDefaultOpen	boolean	false	Whether the selector starts open.
isDisabled	boolean	false	Whether the selector is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the selector is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxBadges	number	3	Maximum number of badges before showing an overflow count.
onChange*	(value: string[]) => void	—	Called when selection changes.
options*	ReadonlyArray<MultiSelectOption>	—	Options to display.
placeholder	string	'Select...'	Placeholder shown when no values are selected.
ref	Ref<HTMLButtonElement>	—	Ref forwarded to the combobox button.
searchPlaceholder	string	'Search...'	Search input placeholder.
selectAllLabel	string	'Select all'	Select-all option label.
size	"sm" | "md" | "lg"	'md'	Select size.
startIcon	IconComponent	—	Start icon rendered in the trigger.
status	InputStatus	—	Validation status displayed below the selector.
style	CSSProperties	—	Inline styles applied to the field root.
triggerDisplay	"count" | "labels" | "badges"	'count'	How selected items are summarized in the trigger.
value*	string[]	—	Selected option values.
isOptional*	true	—
isRequired	false	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
children	(option: MultiSelectOptionData) => ReactNode	—	Custom render function for selectable options.
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the combobox button.
description	ReactNode	—	Supporting text displayed below the label.
hasClear	boolean	false	Whether to show a clear button when values are selected.
hasSearch	boolean	false	Whether to show search input in the dropdown.
hasSelectAll	boolean	false	Whether to show a select-all option.
isDefaultOpen	boolean	false	Whether the selector starts open.
isDisabled	boolean	false	Whether the selector is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the selector is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxBadges	number	3	Maximum number of badges before showing an overflow count.
onChange*	(value: string[]) => void	—	Called when selection changes.
options*	ReadonlyArray<MultiSelectOption>	—	Options to display.
placeholder	string	'Select...'	Placeholder shown when no values are selected.
ref	Ref<HTMLButtonElement>	—	Ref forwarded to the combobox button.
searchPlaceholder	string	'Search...'	Search input placeholder.
selectAllLabel	string	'Select all'	Select-all option label.
size	"sm" | "md" | "lg"	'md'	Select size.
startIcon	IconComponent	—	Start icon rendered in the trigger.
status	InputStatus	—	Validation status displayed below the selector.
style	CSSProperties	—	Inline styles applied to the field root.
triggerDisplay	"count" | "labels" | "badges"	'count'	How selected items are summarized in the trigger.
value*	string[]	—	Selected option values.
isOptional	false	—
isRequired*	true	—