Tag Selector

Forms 48

About

A versatile component for selecting and creating multiple tags with search functionality and keyboard navigation support.

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

Code

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

Usage.tsx

import { useState } from "react"
import { TagSelector } from "@/components/ui/tag-selector"

interface Tag {
  id: string
  label: string
}

function TagSelectorDefault() {
  const availableTags: Tag[] = [
    { id: "1", label: "React" },
    { id: "2", label: "TypeScript" },
    { id: "3", label: "JavaScript" },
    { id: "4", label: "Next.js" },
  ]

  const [selectedTags, setSelectedTags] = useState<Tag[]>([])

  return (
    <TagSelector
      className="max-w-[400px]"
      availableTags={availableTags}
      selectedTags={selectedTags}
      onChange={setSelectedTags}
      getValue={(tag) => tag.id}
      getLabel={(tag) => tag.label}
      createTag={(label) => ({ id: crypto.randomUUID(), label })}
    />
  )
}

function TagSelectorWithPreselected() {
  const availableTags: Tag[] = [
    { id: "1", label: "React" },
    { id: "2", label: "TypeScript" },
    { id: "3", label: "JavaScript" },
    { id: "4", label: "Next.js" },
  ]

  const [selectedTags, setSelectedTags] = useState<Tag[]>([
    availableTags[0],
    availableTags[1],
  ])

  return (
    <TagSelector
      className="max-w-[400px]"
      availableTags={availableTags}
      selectedTags={selectedTags}
      onChange={setSelectedTags}
      getValue={(tag) => tag.id}
      getLabel={(tag) => tag.label}
      createTag={(label) => ({ id: crypto.randomUUID(), label })}
    />
  )
}

export default {
  TagSelectorDefault,
  TagSelectorWithPreselected,
}