Components

chips

انتخاب محدود کسب‌وکار — نوع شرکت، نوع قرارداد، وضعیت ساده. جایگزین Dropdown برای گزینه‌های کوتاه و قابل مشاهده در فرم‌های DastRanj و VahedYek.

import { TaavChoiceChipGroup } from "@repo/ui/taav/forms";

کامپوننت اصلی

Single selection

فقط از props رسمی TaavUI استفاده کنید. unsafeClassName و escape hatchهای مشابه فقط برای موارد نادر هستند و نباید در مثال‌های عادی دیده شوند.

توضیح الگو

تک‌انتخابی (single): پس‌زمینه فیروزه‌ای + بدون تیک
چندانتخابی (multiple): پس‌زمینه فیروزه‌ای + تیک سمت راست متن در RTL

label و description اختیاری هستند و داخل خود کامپوننت رندر می‌شوند.
برای tag/removable از TaavChip و برای وضعیت از TaavStatusBadge استفاده کنید.

Multiple selection

Props

Prop	نوع	پیش‌فرض	توضیح
`options`*	TaavChoiceChipOption[]	—	لیست عنوان و مقدار چیپ‌ها
`selectionMode`	'single' \| 'multiple'	single	در single تیک و عدد نمایش داده نمی‌شود
`value / defaultValue`	string \| string[]	—	مقدار انتخاب‌شده در حالت کنترل‌شده یا اولیه
`onValueChange`	(value: string \| string[]) => void	—	دریافت مقدار جدید انتخاب
`label / description`	ReactNode	—	عنوان و توضیح اختیاری گروه
`disabled`	boolean	false	غیرفعال‌کردن گروه یا گزینه
`ariaLabel`	string	—	برچسب دسترسی برای گروه بدون عنوان نمایشی

Design specs

ShellNo outer borderفقط چیپ‌ها border دارند

Gap mdvar(--taav-choice-chip-group-gap-md)

Single selectFill only — no check iconselectionMode="single"

Multiple selectFill + check on right (RTL)selectionMode="multiple"

Accessibility notes

راهنمای استفاده در DastRanj / VahedYek

• در حالت single از role="radiogroup" و role="radio" اعلام می‌شود.
• در حالت multiple هر چیپ با role="checkbox" اعلام می‌شود.
• اگر label مرئی دارید، ariaLabel لازم نیست؛ در غیر این صورت ariaLabel بدهید.
• description با aria-describedby به گروه متصل می‌شود.

Do / Don\'t

انجام دهید

✓ برای انتخاب‌های محدود کسب‌وکار فقط از TaavChoiceChipGroup استفاده کنید.
✓ برای عنوان و توضیح از props داخلی label و description استفاده کنید.
✓ داخل TaavFieldBlock می‌توانید label را به FieldBlock بسپارید و روی گروه ariaLabel بگذارید.

انجام ندهید

✕ chips جداگانه نسازید — فقط TaavChoiceChipGroup export شده است.
✕ Dropdown را برای انتخاب‌های محدود و قابل مشاهده ترجیح ندهید.
✕ border کلی دور گروه اضافه نکنید.
✕ business logic یا validation داخل کامپوننت ننویسید.