Multi Select

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The MultiSelect component allows users to select multiple options from a dropdown list. It features search functionality, select all/clear options, and displays selected items as badges with individual remove buttons.

Basic Usage

Multi Select with Default Values

Multi Select with Custom Max Count

Multi Select Variants

Default Variant

Secondary Variant

Destructive Variant

Form Integration

Technical Skills

Areas of Interest

Properties

MultiSelect

Property	Type	Description
options	Array<{label: string, value: string}>	Array of options to display in the dropdown.
onValueChange	(values: string[]) => void	Callback function called when selected values change.
defaultValue	string[]	Default selected values when component mounts.
placeholder	string	Placeholder text when no values are selected. Default: "Select options".
maxCount	number	Maximum number of badges to display before showing "+X more". Default: 3.
variant	"default" | "secondary" | "destructive" | "inverted"	Visual variant of the selected badges. Default: "default".
modalPopover	boolean	Whether the popover should be modal. Default: false.
asChild	boolean	Render as child component. Default: false.
className	string	Additional CSS classes for custom styling.
disabled	boolean	Whether the component is disabled.

Features

Search Functionality

• Real-time Search - Filter options as you type
• Keyboard Navigation - Use arrow keys to navigate options
• Enter to Select - Press Enter to select highlighted option

Selection Management

• Select All - Quickly select all available options
• Individual Removal - Remove items by clicking the X on badges
• Clear All - Clear all selections with one click
• Bulk Operations - Efficient handling of multiple selections

Visual Feedback

• Badge Display - Selected items shown as removable badges
• Count Indicator - Shows "+X more" when exceeding maxCount
• Loading States - Smooth animations and transitions
• Variant Support - Different visual styles for different contexts

Accessibility

The MultiSelect component includes comprehensive accessibility features:

• Keyboard Navigation - Full keyboard support for all interactions
• Screen Reader Support - Proper ARIA labels and announcements
• Focus Management - Logical focus order and clear focus indicators
• Search Functionality - Accessible search with proper labeling
• Selection Feedback - Clear indication of selected and available options

Common Use Cases

The MultiSelect component is perfect for:

• Skills Selection - Technical skills, languages, certifications
• Category Filtering - Product categories, content tags, filters
• User Permissions - Role assignments, access controls
• Preferences - User preferences, notification settings
• Team Assignment - Project members, group assignments
• Tag Management - Content tagging, labeling systems

Best Practices

1. Reasonable Options - Keep the number of options manageable (< 50)
2. Clear Labels - Use descriptive, easy-to-understand option labels
3. Appropriate MaxCount - Set maxCount based on available space
4. Search for Large Lists - Enable search for lists with many options
5. Default Selections - Pre-select commonly used options when appropriate
6. Validation - Provide clear feedback for required selections
7. Mobile Optimization - Ensure touch-friendly interactions on mobile
8. Performance - Consider virtualization for very large option lists