Components
Starting preview...
A versatile component for selecting and creating multiple tags with search functionality and keyboard navigation support.
npx shadcn@latest add https://21st.dev/r/serafimcloud/tag-selectorimport { 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,
}