کمبوباکس
comboboxکامپوننتورودی با پیشنهادهای زنده که اول گزینه‌هایی را نشان میده که با متن شما شروع میشن و بعد بقیه را.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add comboboxنصب دستی
محتوای تب «کد» را در
components/ui/combobox.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Combobox } from "@/components/ui/combobox"23const cities = ["اصفهان", "اهواز", "اراک", "اردبیل", "تهران", "تبریز"]4<Combobox options={cities} placeholder="نام شهر…" onChange={setCity} />پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| options | string[] | - | همه‌ی گزینه‌ها. فیلتر داخل خود کامپوننت انجام میشه. |
| value / onChange | string / (v) => void | - | کنترل‌شده یا آزاد. |
| emptyText | string | "چیزی پیدا نشد" | متن حالت خالی. |
| strict | boolean | false | فقط گزینه‌های فهرست قبول میشن و متن آزاد بعد از خروج از فیلد یا به گزینه‌ی هم‌اسم می‌چسبه یا برمی‌گرده. |
| id / name / disabled | string / string / boolean | - | name یک ورودی مخفی با مقدار انتخاب‌شده برای فرم معمولی می‌سازه. |
نکته‌های راست‌چین
- تطبیق به ي و ك عربی، آ و ا، فاصله و نیم‌فاصله حساس نیست، پس «علي اباد» هم «علی‌آباد» را پیدا می‌کنه.