انتخاب چندتایی (MultiSelect)

معرفی

کامپوننت MultiSelect برای انتخاب چندین گزینه از لیست استفاده می‌شود. مقادیر انتخاب‌شده به صورت FilterChip نمایش داده می‌شوند.

چه زمانی استفاده کنیم:

• وقتی کاربر باید چندین گزینه از لیست مشخصی انتخاب کند
• وقتی گزینه‌های انتخاب‌شده باید به صورت chip قابل حذف نمایش داده شوند
• برای فیلترهای چند مقداری در فرم‌ها و داشبوردها

چه زمانی استفاده نکنیم:

• برای انتخاب تک گزینه — از Select استفاده کنید
• برای بیش از ۱۰۰ گزینه — از Command با multi-select استفاده کنید
• وقتی گزینه‌ها باید همیشه دیده شوند — از Checkbox group استفاده کنید

استفاده

import { MultiSelect } from '@parto-system-design/ui'

const options = [
  { value: 'tehran', label: 'تهران' },
  { value: 'isfahan', label: 'اصفهان' },
  { value: 'shiraz', label: 'شیراز' },
  { value: 'tabriz', label: 'تبریز' },
]

const [selected, setSelected] = useState<string[]>([])

;<MultiSelect options={options} value={selected} onValueChange={setSelected} placeholder="شهر را انتخاب کنید" />

با محدودیت انتخاب

<MultiSelect
  options={options}
  value={selected}
  onValueChange={setSelected}
  maxSelected={3}
  placeholder="حداکثر ۳ مورد"
/>

حالت بارگذاری

<MultiSelect options={[]} isLoading={true} placeholder="در حال بارگذاری..." />

Props

حالت‌ها و انواع

با محدودیت انتخاب

با maxSelected می‌توانید حداکثر تعداد گزینه‌های قابل انتخاب را محدود کنید.

حالت بارگذاری

با isLoading={true} یک Skeleton در dropdown نمایش داده می‌شود.

محدودیت نمایش چیپ‌ها

با maxDisplayed تعداد چیپ‌های نمایشی قبل از نمایش عدد overflow را تنظیم کنید.

راهنمای استفاده

دسترسی‌پذیری

• باز و بسته کردن dropdown با Enter و Space
• پیمایش بین گزینه‌ها با ↑ و ↓
• جستجوی درون لیست با تایپ کردن
• حذف چیپ‌ها با کلیک روی دکمه حذف
• پشتیبانی کامل از RTL

کامپوننت‌های مرتبط

• اگر فقط نیاز به انتخاب یک گزینه دارید → Select
• اگر لیست گزینه‌ها بسیار بزرگ است و نیاز به جستجوی پیشرفته دارید → Command
• اگر نیاز به نمایش فیلترهای فعال به صورت chip دارید → FilterChip
• اگر نیاز به جستجو و انتخاب از API دارید → Autocomplete