본문으로 건너뛰기
언어

Tag inputforms

Free-text tag input: Enter, comma and blur commit, paste splits, Backspace removes, IME-safe, with dedupe, max count and validation.

설치

pnpm
pnpm dlx shadcn@4.23.0 add @uikit/tag-input

의존 아이템badgebuttonlocalestyle

Default

tag-input-demo.tsx
"use client";
import * as React from "react";import { TagInput } from "@/components/ui/tag-input";
export default function TagInputDemo() {  const [tags, setTags] = React.useState<string[]>(["quiet", "sea view"]);  return (    <div className="flex w-96 flex-col gap-2">      <TagInput aria-label="Room tags" value={tags} onValueChange={setTags} name="tags" />      <p className="text-sm text-muted-foreground">Tags: {tags.join(" | ") || "none"}</p>    </div>  );}