تنها کامپوننت انتخاب چیپی TaavUI برای فرمهای کسبوکار. عنوان و توضیحات اختیاری، سایز و tone قابل تنظیم، بدون border کلی.
import { TaavChoiceChipGroup } from "@repo/ui/taav/forms";فقط از props رسمی TaavUI استفاده کنید. unsafeClassName و escape hatchهای مشابه فقط برای موارد نادر هستند و نباید در مثالهای عادی دیده شوند.
تکانتخابی (single): پسزمینه فیروزهای + بدون تیک چندانتخابی (multiple): پسزمینه فیروزهای + تیک سمت راست متن در RTL label و description اختیاری هستند و داخل خود کامپوننت رندر میشوند. برای tag/removable از TaavChip و برای وضعیت از TaavStatusBadge استفاده کنید.
نمای مرجع برای فرمهای RTL
این چیپ برای انتخاب گزینهها در فرم است و در حالت انتخابشده، border حذف میشود و background فیروزهای میگیرد.
<TaavChoiceChipGroup
label="نوع شخصیت حقوقی"
description="نوع ساختار حقوقی کسبوکار را انتخاب کنید."
options={options}
value={value}
onValueChange={setValue}
size="lg"
tone="brand"
/>در تکانتخابی فقط پسزمینه فیروزهای دیده میشود؛ بدون تیک.
مقدار انتخابشده: private-joint-stock
در چندانتخابی، هر گزینه انتخابشده تیک خودش را سمت راست متن نشان میدهد.
انتخابهای فعال: remote, full-time
بدون تیک — فقط پسزمینه انتخابشده
با تیک داخل هر چیپ انتخابشده
این چیپ برای انتخاب گزینهها در فرم است و در حالت انتخابشده، border حذف میشود و background فیروزهای میگیرد.
این چیپ برای انتخاب گزینهها در فرم است و در حالت انتخابشده، border حذف میشود و background فیروزهای میگیرد.
| Prop | نوع | پیشفرض | توضیح |
|---|---|---|---|
options* | TaavChoiceChipOption[] | — | لیست label/value/disabled/icon |
label | ReactNode | — | عنوان اختیاری بالای گروه |
description / hint | ReactNode | — | توضیح اختیاری زیر عنوان |
required | boolean | false | نشان الزامی کنار عنوان |
value / defaultValue | string | string[] | — | حالت controlled یا uncontrolled |
onValueChange | (value: string | string[]) => void | — | بازگشت مقدار جدید گروه |
selectionMode | 'single' | 'multiple' | single | single بدون تیک، multiple با تیک |
size | 'sm' | 'md' | 'lg' | md | سایز چیپها و تایپوگرافی label/description |
tone | 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info' | brand | رنگ حالت انتخابشده |
wrap | boolean | true | شکستن به خط بعد |
gap | 'sm' | 'md' | 'lg' | md | فاصله بین chipها |
align | 'start' | 'center' | 'end' | start | تراز ردیف چیپها |
invalid / disabled | boolean | — | حالت خطا یا غیرفعال |
ariaLabel | string | — | وقتی label مرئی ندارید — مثلاً داخل TaavFieldBlock |