MultiSelect

The MultiSelect component provides a flexible way to select multiple options from a list. It includes features like search functionality, maximum selection limit, and a toggle for selecting all options.

Import

import { MultiSelect } from 'h2o-library';

Basic Usage

Basic MultiSelect

<MultiSelect
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    { label: "Option 3", value: "3" },
  ]}
  selectedOptions={selectedOptions}
  setSelectedOptions={setSelectedOptions}
  optionsType="options"
/>

MultiSelect with Max Selection

<MultiSelect
  options={options}
  selectedOptions={selectedOptions}
  setSelectedOptions={setSelectedOptions}
  optionsType="options"
  maxSelectedOptions={2}
/>

MultiSelect with Toggle

<MultiSelect
  options={options}
  selectedOptions={selectedOptions}
  setSelectedOptions={setSelectedOptions}
  optionsType="options"
  toggleLabel="Select All"
  onToggle={(checked) => {
    if (checked) {
      setSelectedOptions(options);
    } else {
      setSelectedOptions([]);
    }
  }}
/>

Interactive Examples

For interactive examples including all features and states, check out our example component:

Props

Prop	Type	Default	Description
options	Array<{ label: string; value: string }>	-	Array of options to select from
selectedOptions	Array<{ label: string; value: string }>	-	Currently selected options
setSelectedOptions	(options: Array<{ label: string; value: string }>) => void	-	Function to update selected options
optionsType	string	-	Label for the options (e.g., "items", "categories")
maxSelectedOptions	number	-	Maximum number of options that can be selected
toggleLabel	string	-	Label for the select all toggle
onToggle	(checked: boolean) => void	-	Function called when the toggle is clicked

Design Considerations

• Clear visual hierarchy
• Proper spacing
• Smooth transitions
• Support for long lists
• Custom styling options
• Responsive design
• Clear visual feedback
• Proper touch targets
• Option alignment
• Support for different contexts
• Proper spacing
• Consistent styling
• Tag display
• Search functionality
• Toggle integration

Accessibility

• Proper ARIA attributes
• Screen reader support
• Clear visual indicators
• Proper contrast ratios
• Support for reduced motion
• Touch target sizes
• Keyboard navigation
• Focus management
• Color contrast
• Text alternatives
• State announcements
• Error handling
• Focus restoration
• Touch device support
• Screen reader announcements