react-multi-select-tabs/README.md

A modern, accessible multi-select component with search functionality and visible selected tabs

# 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

```bash
npm install react-multi-select-tabs
```

Make sure you have React 16.8+ installed:

```bash
npm install react react-dom
```

## Usage

### Basic Example

```jsx
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

```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`