Multi Select Dropdown

Forms

Selection

Select multiple options with color-coded tags and checkbox controls.

Preview

Select multiple options with color-coded tags

DesignFrontend

Props

Component API reference

MultiSelectDropdown

Prop	Type	Default	Description
`options`	`SelectOption[]`	`defaultOptions`	Available options to select from
`defaultValue`	`string[]`	`['design', 'frontend']`	Default selected option IDs (uncontrolled)
`value`	`string[]`	—	Controlled selected values
`onValueChange`	`(selected: string[]) => void`	—	Callback when selection changes
`onApply`	`(selected: string[]) => void`	—	Callback when apply button is clicked
`showApplyButton`	`boolean`	`true`	Show apply button in footer
`showClearButton`	`boolean`	`true`	Show clear all button in footer
`className`	`string`	—	Additional CSS classes

SelectOption Type

{ id: string label: string color?: string // Tailwind classes for background and text color }

Usage

Import and implementation examples

import { MultiSelectDropdown } from '@/components/ui/multi-select-dropdown'
import { useState } from 'react'

// Basic usage (uncontrolled)
<MultiSelectDropdown />

// Controlled component
const [selected, setSelected] = useState(['design', 'frontend'])

<MultiSelectDropdown
  value={selected}
  onValueChange={(newSelected) => {
    setSelected(newSelected)
    console.log('Selected:', newSelected)
  }}
  onApply={(selectedIds) => {
    console.log('Applied:', selectedIds)
  }}
/>

// Custom options
const customOptions = [
  {
    id: 'javascript',
    label: 'JavaScript',
    color: 'bg-yellow-100 text-yellow-700'
  },
  {
    id: 'typescript',
    label: 'TypeScript',
    color: 'bg-blue-100 text-blue-700'
  },
  {
    id: 'python',
    label: 'Python',
    color: 'bg-green-100 text-green-700'
  },
]

<MultiSelectDropdown
  options={customOptions}
  defaultValue={['javascript']}
  showApplyButton={true}
  showClearButton={true}
/>

Features

Built-in functionality

Color-coded tags: Visual display for selected items
Checkbox controls: Easy toggle for each option
Clear all button: Reset selection quickly
Apply button: Confirm changes explicitly
6 color categories: Design, Frontend, Backend, DevOps, Mobile, Data
Bulk selection: Select/deselect with visual feedback
Controlled & uncontrolled: Both modes supported
Customizable options: Custom options and colors
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses button with aria-haspopup="listbox"aria-expanded for dropdown stateCheckboxes have proper labelsSelected items announced by screen readers

Keyboard Navigation

Key	Action
`Enter/Space`	Open dropdown / Toggle checkbox
`Escape`	Close dropdown
`Tab`	Navigate between checkboxes
`Arrow Keys`	Navigate options (when focused)

Notes

Focus trapped within open dropdown
Clear and Apply buttons are focusable
Selection count announced when changed

Related Components

Select Searchable Select Checkbox