کامپوننت‌ها
انتخاب چندتایی
انتخاب چند گزینه از یک فهرست بلند با جستجو، مثل مسئولان پروژه یا برچسب‌های یک محصول.
import { MultiSelect } from "@kashi-ui/react";نمونه
سارا محمدیعلی رضایی
- سارا محمدیطراح محصول
- رضا کریمیطراح رابط
- علی رضاییفرانتاند
- مینا احمدیبکاند
- نیما صا دقیتست
حداکثر سه نفر
۲ نفر: سارا محمدی، علی رضایی
<MultiSelect label="مسئولان پروژه" options={team} value={owners} onChange={setOwners}
max={3} placeholder="جستجوی همکار" name="owners" />همان گزینه‌ها و جستجوی Combobox را دارد (یکدست‌سازی «ي» و «ی»، توضیح و آیکون). انتخاب‌ها به‌شکل برچسب داخل فیلد نمایش داده می‌شوند و با رسیدن به max، بقیهٔ گزینه‌ها غیرفعال می‌شوند. برای وارد کردن مقدار آزاد، که در فهرست نیست، TagInput مناسب‌تر است.
| نام | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
options | ComboboxOption[] | — | مثل Combobox |
value / defaultValue | string[] | [] | مقدارهای انتخاب‌شده |
onChange | (value: string[]) => void | — | |
max | number | — | بیشترین تعداد انتخاب |
name | string | — | یک فیلد پنهان برای هر مقدار |
labels | { remove?, selected?, max?, clear? } | — | متن‌های صفحه‌خوان |
کیبورد
| کلید | عمل |
|---|---|
| ↓ / ↑ | گزینهٔ بعد / قبل |
| Enter | انتخاب یا لغو انتخاب گزینهٔ فعال |
| Backspace در فیلد خالی | حذف آخرین برچسب |
| Esc | بستن فهرست |
دسترس‌پذیری
الگوی Combobox با aria-multiselectable؛ هر گزینه aria-selected دارد و تعداد انتخاب‌ها به فیلد وصل است («۲ مورد انتخاب شده»). افزودن و حذف با aria-live اعلام می‌شود.