کامپوننت‌ها

ورودی برچسب

نوشتن چند مقدار در یک فیلد، مثل مهارت‌ها، برچسب‌ها یا گیرندگان ایمیل.

import { TagInput } from "@kashi-ui/react";

نمونه

مهارت‌ها

طراحیReact

با Enter یا ویرگول جدا کنید؛ حداکثر ۵ مورد.

۲ مورد: طراحی، React

const [tags, setTags] = useState(["طراحی", "React"]);

<TagInput label="مهارت‌ها" value={tags} onChange={setTags} max={5}
hint="با Enter یا ویرگول جدا کنید؛ حداکثر ۵ مورد." />

با Enter، ویرگول انگلیسی و ویرگول فارسی «،» برچسب ساخته می‌شود؛ متن چسبانده‌شده هم جدا می‌شود. Backspace در فیلد خالی آخرین برچسب را حذف می‌کند.

اعتبارسنجی

گیرندگان

<TagInput label="گیرندگان" tone="neutral"
validate={(t) => (isEmail(t) ? undefined : "این ایمیل معتبر نیست.")} />

نام	نوع	پیش‌فرض	توضیح
`value / defaultValue`	`string[]`	`[]`	برچسب‌ها
`onChange`	`(tags: string[]) => void`	—
`separators`	`string[]`	`["Enter", ",", "،"]`	کلیدهای جداکننده
`validate`	`(tag) => string \| undefined`	—	پیام خطا برای برچسب نامعتبر
`max`	`number`	—	بیشترین تعداد
`allowDuplicates`	`boolean`	`false`
`tone`	`BadgeTone`	`"brand"`	رنگ برچسب‌ها
`name`	`string`	—	یک فیلد پنهان برای هر برچسب

دسترس‌پذیری

هر برچسب دکمهٔ حذف با نام «حذف React» دارد. افزودن، حذف و خطاها (تکراری، بیش از حد مجاز) با aria-live اعلام می‌شوند و پیام خطا به فیلد وصل است.