Tags Input

npx shadcn@latest add https://yami.ui.unsanity.ai/r/tags-input.json

"use client"

import * as React from "react"

import {
  TagsInput,
  TagsInputInput,
  TagsInputItem,
  TagsInputLabel,
  TagsInputList,
} from "@/components/ui/tags-input"

export function TagsField() {
  const [tags, setTags] = React.useState(["Design", "UI"])

  return (
    <TagsInput value={tags} onValueChange={setTags}>
      <TagsInputLabel>Tags</TagsInputLabel>
      <TagsInputList>
        {tags.map((tag) => (
          <TagsInputItem key={tag} value={tag}>
            {tag}
          </TagsInputItem>
        ))}
        <TagsInputInput placeholder="Add tag..." />
      </TagsInputList>
    </TagsInput>
  )
}