Multiple Selector

Forms 50

About

Fast, composable, fully-featured multiple selector for React.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Multiple Selector to your project and fits it to your theme.

Code

How Multiple Selector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import { MultipleSelector, type Option } from '@/components/ui/multiple-selector';
import { useState } from 'react';

function MultipleSelectorDemo() {
  const [selected, setSelected] = useState<Option[]>([]);
  
  const groupedOptions: Option[] = [
    { value: 'react', label: 'React', category: 'Frontend' },
    { value: 'vue', label: 'Vue', category: 'Frontend' },
    { value: 'nodejs', label: 'Node.js', category: 'Backend' },
    { value: 'python', label: 'Python', category: 'Backend' },
  ];

  return (
    <div className="p-4 space-y-4">
      <div>
        <MultipleSelector
          placeholder="Select technologies..."
          defaultOptions={groupedOptions}
          groupBy="category"
          onChange={setSelected}
        />
      </div>
    </div>
  );
}

export { MultipleSelectorDemo };