Label Selector

Component 14

About

Here is Label Selector component by IndevUi

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

Code

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

Usage.tsx

'use client';

import { useState } from 'react';
import LabelSelector, { labels } from '@/components/ui/label-selector';
import type { LabelInterface } from '@/components/ui/label-selector';

const LabelSelectorDemo = () => {
   const [selected, setSelected] = useState<LabelInterface[]>([labels[0], labels[2]]);

   return (
      <div className="flex w-full flex-col items-center justify-center gap-8 p-4">
         <div className="flex flex-col items-center gap-2">
            <h2 className="text-lg font-semibold">Label Selector</h2>
            <p className="text-sm text-muted-foreground">Click to select or deselect labels.</p>
         </div>

         <LabelSelector selectedLabels={selected} onChange={setSelected} />

         <div className="w-full max-w-sm rounded-lg border bg-background p-4">
            <h3 className="mb-2 font-medium">Currently Selected Labels:</h3>
            {selected.length > 0 ? (
               <div className="flex flex-wrap gap-2">
                  {selected.map((label) => (
                     <span
                        key={label.id}
                        className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold"
                        style={{
                           backgroundColor: `${label.color}33`,
                           color: label.color,
                           border: `1px solid ${label.color}`,
                        }}
                     >
                        {label.name}
                     </span>
                  ))}
               </div>
            ) : (
               <p className="text-sm text-muted-foreground">No labels selected.</p>
            )}
         </div>
      </div>
   );
};

export { LabelSelectorDemo as DemoOne };