Form Control

TaavOptionCard

گزینه selectable کارت‌مانند — پایه business forms مثل نوع قرارداد یا policy setup.

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

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

استفاده پایه

RTL grid example

<TaavOptionCard title="قرارداد رسمی" selected={selected} onClick={...} />

پیش‌نمایش

پایه حقوق ثابت

مبلغ ماهانه ثابت

پایه ساعتی

محاسبه بر اساس ساعت

پیش‌نمایش

Prop	نوع	پیش‌فرض	توضیح
`size`	'sm' \| 'md' \| 'lg'	md	padding و title
`tone`	'brand' \| 'neutral' \| 'success' \| 'warning' \| 'danger' \| 'info'	brand	حالت selected
`selected`	boolean	false	حالت انتخاب‌شده
`inputType`	'radio' \| 'checkbox' \| 'none'	none	نوع input پنهان
`title / description / meta`	ReactNode	—	محتوای کارت
`icon / badge`	ReactNode	—	آیکون یا badge

Selected bgvar(--taav-option-card-selected-bg)

Selected bordervar(--taav-option-card-selected-border)

Invalid bordervar(--taav-option-card-invalid-border)