Getting Started
Foundations
Components
Search for a command to run...
MultiSelect provides an intuitive interface for selecting multiple items from a list of options. Selected items are displayed as removable badges within the trigger, and users can search/filter options using a built-in search input. The component supports selecting all items at once, clearing selections, and limiting the number of visible badges with a count indicator for additional selections.
This component is ideal for filter interfaces, tag selection, category assignment, or any scenario where users need to select multiple items from a predefined list. It combines the Command component's search functionality with multi-selection capabilities.
import { MultiSelect } from "@strongtie/design-system/multi-select"<MultiSelect>| Prop | Type | Default | Description |
|---|---|---|---|
onValueChange * | (value: string[]) => void | - | Callback function triggered when the selected values change. Receives an array of all currently selected values. |
options * | { label: string; value: string; icon?: ComponentType<{ className?: string | unde... | - | An array of option objects to be displayed in the multi-select component. Each option should have a unique value, a label, and an optional icon. |
defaultValue | string[] | [] | The default selected values when the component initially mounts. Use for uncontrolled component behavior. |
maxCount | number | 3 | Maximum number of selected item badges to display before showing a count. Excess selections are shown as a "+ X more" badge. |
modalPopover | boolean | false | Controls whether the popover is modal. When true, interaction with outside elements is disabled. |
placeholder | string | Select options | Placeholder text displayed when no values are selected. |
variant | "default" | "secondary" | null | 'default' | The visual style variant of the selected item badges. |
Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
The following data attributes are used to identify component parts:
multi-select-badgemulti-select-badge-moremulti-select-contentmulti-select-footer-clearmulti-select-footer-closemulti-select-itemmulti-select-item-allmulti-select-triggerOther CSS classes used by this component:
multi-select-actionsmulti-select-badgemulti-select-badge-iconmulti-select-badge-moremulti-select-badge-removemulti-select-badge-remove-iconmulti-select-badgesmulti-select-checkboxmulti-select-checkbox-iconmulti-select-checkbox-selectedmulti-select-checkbox-unselectedmulti-select-chevronmulti-select-clearmulti-select-clear-iconmulti-select-contentmulti-select-footermulti-select-footer-clearmulti-select-footer-closemulti-select-footer-itemmulti-select-footer-separatormulti-select-groupmulti-select-itemmulti-select-item-allmulti-select-item-iconmulti-select-placeholdermulti-select-placeholder-textmulti-select-popover-contentmulti-select-separatormulti-select-triggerEnsure proper accessibility attributes are added when implementing this component.