چندانتخابی
multi-selectکامپوننتفهرست انتخاب چندتایی با جستوجو، تیک کنار هر گزینه و چیپهایی که داخل فیلد مینشینن و بعد از چند تا به «+۲ مورد دیگر» جمع میشن.
ریاکتتایپاسکریپت
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add multi-selectنصب دستی
محتوای تب «کد» را در
components/ui/multi-select.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { MultiSelect } from "@/components/ui/multi-select"23<MultiSelect4 placeholder="مهارتها…"5 options={[{ value: "react", label: "ریاکت" }, { value: "next", label: "نکست" }, { value: "ts", label: "تایپاسکریپت" }]}6 max={3}7 onChange={setSkills}8/>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| options | { value; label; disabled? }[] | - | گزینهها. جستوجو روی label انجام میشه. |
| value / onChange | string[] | - | مقدارهای انتخابشده، کنترلشده یا آزاد. |
| searchable | boolean | true | فیلد فیلتر بالای فهرست. |
| maxVisible | number | 3 | تعداد چیپهایی که داخل فیلد نشان داده میشن و بقیه به «+n مورد دیگر» تبدیل میشن. |
| max | number | - | سقف انتخاب. بعد از رسیدن به آن، گزینههای دیگر غیرفعال میشن. |
نکتههای راستچین
- پنل با lib/float.tsx داخل body رندر میشه تا overflow والد آن را نبره و همعرض فیلد باز میشه.
- با کلید پایین فهرست باز میشه، Space یا Enter تیک میزنه، Backspace روی جستوجوی خالی آخرین چیپ را حذف میکنه و Escape میبنده.