برچسبها
tags-inputکامپوننتورودی چندمقداری که با Enter یا ویرگول فارسی هر عبارت را چیپ میکنه، متن چسباندهشده را میشکنه و تکراریها را نمیپذیره.
ریاکتتیلویند
۲ / ۵
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add tags-inputنصب دستی
محتوای تب «کد» را در
components/ui/tags-input.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { TagsInput } from "@/components/ui/tags-input"23<TagsInput defaultValue={["ریاکت", "تیلویند"]} max={5} onChange={setTags} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| value / onChange | string[] | - | فهرست برچسبها، کنترلشده یا آزاد. |
| max | number | - | سقف تعداد. شمارندهی «۳ / ۵» زیر فیلد میآد و بعد از پر شدن، تایپ بسته میشه. |
| separators | string[] | ["،", ","] | کاراکترهایی که موقع تایپ برچسب را ثبت میکنن. Enter همیشه ثبت میکنه. |
| validate | (tag) => string | null | trim | قبل از افزودن اصلاح یا رد میکنه، مثلاً حروف کوچک کردن یا محدودیت طول. |
نکتههای راستچین
- Backspace روی فیلد خالی آخرین چیپ را برمیداره و با ترک فیلد، متن نیمهکاره هم ثبت میشه.
- هر چیپ dir="auto" داره تا برچسب انگلیسی کنار فارسی درست نمایش داده بشه.