TaavUI Lab
Components

inputs

کامپوننت اصلی برای ساخت فیلدهای استاندارد کسب‌وکار با برچسب، کنترل و متن راهنما.

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

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

شماره اختصاصی در اداره مالیات۰ / ۵۰

کد اقتصادی ۱۲ رقمی صادر شده توسط سازمان امور مالیاتی۰ / ۱۲

توکن identity-fields

توکن bank-account-input

۰ / ۲۰

توکن amount-input

این مقدار به صورت عدد ثابت برای هزینه یا پرداخت مشخص شده و مستقل از درصد یا شرایط دیگر است.

توکن percentage-input

این مقدار به صورت درصدی از مبلغ محاسبه می‌شود و با تغییر مبلغ قرارداد، به‌طور خودکار به‌روزرسانی می‌شود.

توکن naming-range-input

مانند A

شماره‌گذاری مانند از ۲ تا ۵

توکن موبایل یا ایمیل

وارد کردن شماره موبایل یا ایمیل برای ثبت کاربر ضروری می‌باشد.0/50

توکن تاریخ آخرین قسط

تاریخی که اقساط باید تا آن زمان به پایان برسند. تعداد و مبلغ اقساط بر اساس این تاریخ محاسبه می‌شود.

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

ساختار استاندارد

<TaavFieldBlock
  label="کد اقتصادی"
  required
  htmlFor="economic-code"
  supportText="کد اقتصادی ۱۲ رقمی صادر شده توسط سازمان امور مالیاتی"
>
  <TaavInput id="economic-code" />
</TaavFieldBlock>

Props

Propنوعپیش‌فرضتوضیح
label*ReactNode—عنوان فیلد بالای کنترل
required / optionalboolean—نمایش ستاره الزامی یا برچسب اختیاری
tooltip / hint / supportTextReactNode—متن راهنمای ثابت زیر فیلد؛ نه hover tooltip
descriptionReactNode—fallback برای support text وقتی tooltip/hint/supportText داده نشده باشد
error / warning / successReactNode—پیام وضعیت زیر support text؛ error اولویت بالاتر دارد
htmlForstring—اتصال label به کنترل
size'sm' | 'md' | 'lg'mdspacing و تایپوگرافی الگو
align'start' | 'center' | 'end' | 'stretch'stretchتراز container کلی
labelAlign / tooltipAlign'start' | 'center' | 'end'startتراز label و متن راهنما
invalid / disabledboolean—state بصری wrapper
children*ReactNode—TaavInput / TaavSelect / TaavTextarea یا کنترل سفارشی

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

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

  • • برای اتصال برچسب به کنترل، htmlFor و id را با یک مقدار یکتا تنظیم کنید.
  • • متن راهنما از طریق aria-describedby به کنترل فرزند متصل می‌شود.
  • • required بودن فیلد با API و نشانه‌ی بصری ستاره نمایش داده می‌شود.