React Selector Chips

A flexible, customizable chip selector component for React applications with TypeScript support. Perfect for filters, tags, multi-select options, and more.

Installation

npm install @aniruddha1806/selector-chips

Features

• 🎯 Simple multi-selection interface with toggle functionality
• 🎨 Extensive styling customization (inline styles + classNames)
• 📱 Responsive layouts (horizontal, vertical, grid)
• 🔍 Support for icons and tooltips
• 🔢 Maximum selection limit option
• 📜 Scrollable container for large option sets
• ♿ Accessibility features with ARIA attributes
• 🎯 TypeScript support with full type definitions
• 🪶 Zero dependencies and lightweight

Quick Start

import SelectorChips from '@aniruddha1806/selector-chips';

function App() {
  const options = [
    { id: 1, label: 'React' },
    { id: 2, label: 'Vue' },
    { id: 3, label: 'Angular' },
    { id: 4, label: 'Svelte' },
    { id: 5, label: 'Next.js' }
  ];

  const handleChange = (selectedIds) => {
    console.log('Selected:', selectedIds);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>Select Frameworks:</h3>
      <SelectorChips
        options={options}
        defaultSelected={[1, 5]}
        onChange={handleChange}
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | options | ChipOption[] | required | Array of chip options | | defaultSelected | (string \| number)[] | [] | Initially selected chip IDs | | onChange | (selectedIds: (string \| number)[]) => void | undefined | Selection change callback | | className | string | undefined | CSS class for container | | chipClassName | string | undefined | CSS class for all chips | | selectedChipClassName | string | undefined | CSS class for selected chips | | disabledChipClassName | string | undefined | CSS class for disabled chips | | maxSelections | number | undefined | Maximum number of selectable chips | | iconPosition | "left" \| "right" | "left" | Position of icons in chips | | showTooltips | boolean | false | Enable tooltips on hover | | tooltipDelay | number | 300 | Delay before showing tooltip (ms) | | scrollable | boolean | false | Make container scrollable | | maxHeight | number \| string | 200 | Max height for scrollable container | | layout | "horizontal" \| "vertical" \| "grid" | "horizontal" | Layout arrangement of chips |

ChipOption Type

type ChipOption = {
  id: string | number;
  label: string;
  disabled?: boolean;
  icon?: ReactNode;
  tooltip?: string;
}

Examples

Basic Usage

Simple chip selector with default styling:

import SelectorChips from '@aniruddha1806/selector-chips';

function BasicExample() {
  const categories = [
    { id: 'electronics', label: 'Electronics' },
    { id: 'clothing', label: 'Clothing' },
    { id: 'books', label: 'Books' },
    { id: 'home', label: 'Home & Kitchen' },
    { id: 'toys', label: 'Toys' }
  ];

  return (
    <div>
      <h3>Filter by Category:</h3>
      <SelectorChips
        options={categories}
        onChange={(selected) => console.log('Selected categories:', selected)}
      />
    </div>
  );
}

With Icons

Add icons to your chips:

import SelectorChips from '@aniruddha1806/selector-chips';
import { FaReact, FaVuejs, FaAngular, FaJs, FaHtml5 } from 'react-icons/fa';

function IconChipsExample() {
  const technologies = [
    { id: 'react', label: 'React', icon: <FaReact /> },
    { id: 'vue', label: 'Vue', icon: <FaVuejs /> },
    { id: 'angular', label: 'Angular', icon: <FaAngular /> },
    { id: 'javascript', label: 'JavaScript', icon: <FaJs /> },
    { id: 'html', label: 'HTML', icon: <FaHtml5 /> }
  ];

  return (
    <div>
      <h3>Select Technologies:</h3>
      <SelectorChips
        options={technologies}
        iconPosition="left"
        onChange={(selected) => console.log('Selected:', selected)}
      />
    </div>
  );
}

With Tooltips

Add helpful tooltips to chips:

import SelectorChips from '@aniruddha1806/selector-chips';

function TooltipChipsExample() {
  const plans = [
    { 
      id: 'basic', 
      label: 'Basic', 
      tooltip: '$10/month - 10GB storage' 
    },
    { 
      id: 'pro', 
      label: 'Pro', 
      tooltip: '$20/month - 50GB storage + priority support' 
    },
    { 
      id: 'enterprise', 
      label: 'Enterprise', 
      tooltip: '$50/month - Unlimited storage + 24/7 support' 
    }
  ];

  return (
    <div>
      <h3>Select Plan:</h3>
      <SelectorChips
        options={plans}
        showTooltips={true}
        tooltipDelay={500}
        onChange={(selected) => console.log('Selected plan:', selected)}
      />
    </div>
  );
}

Grid Layout

Display chips in a responsive grid:

import SelectorChips from '@aniruddha1806/selector-chips';

function GridChipsExample() {
  const colors = [
    { id: 'red', label: 'Red' },
    { id: 'blue', label: 'Blue' },
    { id: 'green', label: 'Green' },
    { id: 'yellow', label: 'Yellow' },
    { id: 'purple', label: 'Purple' },
    { id: 'orange', label: 'Orange' },
    { id: 'pink', label: 'Pink' },
    { id: 'black', label: 'Black' },
    { id: 'white', label: 'White' }
  ];

  return (
    <div>
      <h3>Select Colors:</h3>
      <SelectorChips
        options={colors}
        layout="grid"
        onChange={(selected) => console.log('Selected colors:', selected)}
      />
    </div>
  );
}

With Maximum Selections

Limit the number of selectable chips:

import SelectorChips from '@aniruddha1806/selector-chips';

function LimitedSelectionExample() {
  const toppings = [
    { id: 'cheese', label: 'Extra Cheese' },
    { id: 'pepperoni', label: 'Pepperoni' },
    { id: 'mushrooms', label: 'Mushrooms' },
    { id: 'onions', label: 'Onions' },
    { id: 'peppers', label: 'Bell Peppers' },
    { id: 'olives', label: 'Olives' },
    { id: 'bacon', label: 'Bacon' }
  ];

  return (
    <div>
      <h3>Select up to 3 Pizza Toppings:</h3>
      <SelectorChips
        options={toppings}
        maxSelections={3}
        onChange={(selected) => console.log('Selected toppings:', selected)}
      />
    </div>
  );
}

Scrollable Container

Handle large sets of options with scrolling:

import SelectorChips from '@aniruddha1806/selector-chips';

function ScrollableChipsExample() {
  // Generate 20 options for demonstration
  const manyOptions = Array.from({ length: 20 }, (_, i) => ({
    id: i + 1,
    label: `Option ${i + 1}`
  }));

  return (
    <div>
      <h3>Select Options:</h3>
      <SelectorChips
        options={manyOptions}
        scrollable={true}
        maxHeight={150}
        layout="vertical"
        onChange={(selected) => console.log('Selected:', selected)}
      />
    </div>
  );
}

Custom Styling

Apply custom styles with className props:

import SelectorChips from '@aniruddha1806/selector-chips';
import './custom-chips.css'; // Your custom CSS file

function CustomStyledChipsExample() {
  const sizes = [
    { id: 'xs', label: 'XS' },
    { id: 's', label: 'S' },
    { id: 'm', label: 'M' },
    { id: 'l', label: 'L' },
    { id: 'xl', label: 'XL' }
  ];

  return (
    <div>
      <h3>Select Size:</h3>
      <SelectorChips
        options={sizes}
        className="size-selector"
        chipClassName="size-chip"
        selectedChipClassName="size-chip-selected"
        disabledChipClassName="size-chip-disabled"
        onChange={(selected) => console.log('Selected size:', selected)}
      />
    </div>
  );
}

CSS file (custom-chips.css):

.size-selector {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}

.size-chip {
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: #333;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.size-chip:hover {
  background-color: #e0e0e0;
}

.size-chip-selected {
  background-color: #4a90e2;
  color: white;
}

.size-chip-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: line-through;
}

Disabled Options

Include disabled options that can't be selected:

import SelectorChips from '@aniruddha1806/selector-chips';

function DisabledChipsExample() {
  const subscriptionFeatures = [
    { id: 'basic', label: 'Basic Features', disabled: false },
    { id: 'advanced', label: 'Advanced Features', disabled: false },
    { id: 'premium', label: 'Premium Features', disabled: true },
    { id: 'enterprise', label: 'Enterprise Features', disabled: true }
  ];

  return (
    <div>
      <h3>Available Features:</h3>
      <p>Upgrade to unlock premium features</p>
      <SelectorChips
        options={subscriptionFeatures}
        onChange={(selected) => console.log('Selected features:', selected)}
      />
    </div>
  );
}

import SelectorChips, { ChipOption, SelectorChipsProps } from '@aniruddha1806/selector-chips';
import { useState } from 'react';

interface FilterOption {
  id: string;
  name: string;
  count: number;
}

const FilterComponent: React.FC = () => {
  const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
  
  // Your data from API or elsewhere
  const filterData: FilterOption[] = [
    { id: 'filter1', name: 'Popular', count: 120 },
    { id: 'filter2', name: 'New', count: 42 },
    { id: 'filter3', name: 'Sale', count: 38 }
  ];
  
  // Transform your data to match ChipOption type
  const chipOptions: ChipOption[] = filterData.map(filter => ({
    id: filter.id,
    label: `${filter.name} (${filter.count})`,
    tooltip: `${filter.count} items available`
  }));
  
  // Define props with proper types
  const selectorProps: SelectorChipsProps = {
    options: chipOptions,
    defaultSelected: [],
    onChange: (ids) => setSelectedFilters(ids as string[]),
    showTooltips: true,
    layout: 'horizontal'
  };
  
  return (
    <div>
      <h3>Filter Products:</h3>
      <SelectorChips {...selectorProps} />
    </div>
  );
};

Styling

The component supports both inline styles and CSS classes for maximum flexibility: