Tag Input

npx shadcn@latest add https://ui.saasflare.io/r/tag-input.json

pnpm add @saasflare/ui

"use client"import { useState } from "react"import { Label, TagInput } from "@saasflare/ui"/** Entries become removable pills on Enter or comma. */export function Demo() {    const [tags, setTags] = useState<string[]>(["billing", "urgent"])    return (        <div className="flex flex-col gap-2 w-full max-w-sm">            <Label>Ticket labels</Label>            <TagInput value={tags} onChange={setTags} placeholder="Add a label…" />        </div>    )}

"use client"import { useState } from "react"import { Label, TagInput } from "@saasflare/ui"/** A tag input capped at a maximum number of entries. */export function Demo() {    const [recipients, setRecipients] = useState<string[]>(["ada@acme.com"])    return (        <div className="flex flex-col gap-2 w-full max-w-sm">            <Label>Invite teammates (max 3)</Label>            <TagInput                value={recipients}                onChange={setRecipients}                maxTags={3}                placeholder="Add an email…"            />        </div>    )}