React Multi-Select Tabs

A modern, accessible multi-select component with search functionality and visible selected tabs for React applications.

Features

• 🎯 Multi-Select with Tags: Selected items appear as removable tags
• 🔍 Search Functionality: Filter options with real-time search
• ⌨️ Keyboard Navigation: Full keyboard support with arrow keys
• 🎨 Tailwind Styled: Beautiful, customizable design with CSS fallbacks
• ♿ Accessible: ARIA compliant and screen reader friendly
• 📱 Responsive: Works great on mobile and desktop
• 🔧 TypeScript: Full TypeScript support with proper types
• 🎛️ Customizable: Extensive styling and behavior options

Installation

npm install react-multi-select-tabs

Make sure you have React 16.8+ installed:

npm install react react-dom

Usage

Basic Example

import React, { useState } from 'react';
import { MultiSelect } from 'react-multi-select-tabs';

const options = [
  { value: '1', label: 'Apple' },
  { value: '2', label: 'Banana' },
  { value: '3', label: 'Cherry' },
  { value: '4', label: 'Date' },
  { value: '5', label: 'Elderberry' }
];

function App() {
  const [selectedValues, setSelectedValues] = useState([]);

  return (
    <div className="max-w-md mx-auto p-6">
      <label className="block text-sm font-medium text-gray-700 mb-2">
        Select Fruits
      </label>
      <MultiSelect
        options={options}
        value={selectedValues}
        onChange={setSelectedValues}
        placeholder="Choose your favorite fruits..."
        searchPlaceholder="Search fruits..."
      />
    </div>
  );
}

With TypeScript

import React, { useState } from 'react';
import { MultiSelect, Option } from 'react-multi-select-tabs';

const options: Option[] = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];

function App() {
  const [selectedValues, setSelectedValues] = useState<(string | number)[]>([]);

  return (
    <MultiSelect
      options={options}
      value={selectedValues}
      onChange={setSelectedValues}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | options | Option[] | [] | Array of options to display | | value | (string \| number)[] | [] | Currently selected values | | onChange | (values: (string \| number)[]) => void | - | Callback when selection changes | | placeholder | string | "Select options..." | Placeholder when no items selected | | searchPlaceholder | string | "Search..." | Placeholder for search input | | disabled | boolean | false | Disable the entire component | | maxSelectedItems | number | - | Maximum number of items that can be selected | | className | string | "" | Additional CSS classes for container | | dropdownClassName | string