TaavUI Lab
Business Components

TaavFieldBlock

الگوی فیلد کسب‌وکاری استاندارد DastRanj و VahedYek — label بالای کنترل، متن راهنمای ثابت زیر فیلد، و اولویت بصری روشن برای خطا و وضعیت.

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

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

تعریف Field Tooltip

در TaavUI، tooltip برای متن راهنمای همیشه‌نمایان زیر فیلد استفاده می‌شود؛ نه tooltip شناور، نه آیکن راهنما، و نه hover interaction.

انتخاب محدود کسب‌وکار

برای انتخاب‌های محدود و قابل مشاهده، از Choice Chip استفاده می‌شود؛ نه Dropdown. این باعث می‌شود گزینه‌ها سریع‌تر دیده و انتخاب شوند. از TaavSelect فقط برای لیست‌های بلند، پویا، یا گزینه‌هایی که جا نمی‌شوند استفاده کنید.

Screenshot-like RTL demo

چیدمان مرجع برای فرم‌های دو ستونه کسب‌وکار در VahedYek و DastRanj

RTL business form2-column

نام رسمی ثبت شده در اداره ثبت شرکت ها

نام تجاری جهت نمایش در سامانه

شناسه ملی اشخاص حقوقی برای تمامی شرکت ها اجباری است

شماره اختصاصی ثبت در اداره ثبت شرکت ها

<TaavFieldBlock
  label="نام قانونی شرکت / کسب و کار"
  required
  tooltip="نام رسمی ثبت شده در اداره ثبت شرکت ها"
>
  <TaavInput size="lg" radius="xl" />
</TaavFieldBlock>

Required / Optional / Status states

Usage gallery

این متن همیشه زیر فیلد دیده می‌شود و tooltip شناور نیست.

در URL عمومی یا گزارش‌های فشرده استفاده می‌شود.

نوع ساختار حقوقی کسب‌وکار را انتخاب کنید.

بهتر است نوع شخصیت را با اسناد ثبتی تطبیق دهید.

این متن در پروفایل کسب‌وکار نمایش داده می‌شود.

متن شرح فعالیت آماده انتشار است.

Control variations

TaavInput / TaavChoiceChipGroup / TaavTextarea

نام و نام خانوادگی نماینده پاسخ‌گو را وارد کنید.

نوع ساختار حقوقی کسب‌وکار را انتخاب کنید.

اگر جزئیات بیشتری لازم است، این بخش بهترین محل برای درج آن است.

<TaavFieldBlock
  label="نوع کسب‌وکار"
  tooltip="نوع ساختار حقوقی کسب‌وکار را انتخاب کنید."
>
  <TaavChoiceChipGroup
    ariaLabel="نوع کسب‌وکار"
    options={companyTypeOptions}
    value={businessType}
    onValueChange={setBusinessType}
    size="md"
    tone="brand"
  />
</TaavFieldBlock>

Light / Dark preview

نام رسمی ثبت شده در اداره ثبت شرکت ها

نام تجاری جهت نمایش در سامانه

شناسه ملی اشخاص حقوقی برای تمامی شرکت ها اجباری است

شماره اختصاصی ثبت در اداره ثبت شرکت ها

نام رسمی ثبت شده در اداره ثبت شرکت ها

نام تجاری جهت نمایش در سامانه

شناسه ملی اشخاص حقوقی برای تمامی شرکت ها اجباری است

شماره اختصاصی ثبت در اداره ثبت شرکت ها

Props

Propنوعپیش‌فرضتوضیح
label*ReactNodeعنوان فیلد بالای کنترل
required / optionalbooleanنمایش ستاره الزامی یا برچسب اختیاری
tooltip / hint / supportTextReactNodeمتن راهنمای ثابت زیر فیلد؛ نه hover tooltip
descriptionReactNodefallback برای 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 / disabledbooleanstate بصری wrapper
children*ReactNodeTaavInput / TaavSelect / TaavTextarea یا کنترل سفارشی

Design specs

LabelStart-aligned by defaultlabelAlign → start | center | end
Support textAlways visible below controltooltip / hint / supportText
State prioritySupport text first, feedback aftererror overrides warning/success tone
Limited choicesTaavChoiceChipGroupPrefer chips over TaavSelect for short business option sets

Accessibility

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

  • از htmlFor روی TaavFieldBlock و id روی کنترل استفاده کنید تا label به ورودی متصل بماند.
  • برای TaavChoiceChipGroup، ariaLabel را پاس دهید تا گروه انتخاب بدون label مرئی قابل فهم باشد.
  • متن راهنما و خطا از طریق aria-describedby به کنترل متصل می‌شوند وقتی child قابل اتصال باشد.
  • ستاره الزامی تنها نشانه نیست؛ وضعیت required در API و semantic field حفظ می‌شود.
  • اگر error دارید، invalid را هم به کنترل TaavInput/TaavTextarea بدهید تا state بصری یکدست بماند.

Do / Don't

انجام دهید

  • برای فرم‌های کسب‌وکاری با label بالا و helper ثابت از TaavFieldBlock استفاده کنید.
  • برای انتخاب‌های محدود (نوع شرکت، نوع قرارداد، وضعیت ساده) از TaavChoiceChipGroup داخل FieldBlock استفاده کنید.
  • tooltip را برای متن راهنمای ثابت زیر فیلد نگه دارید.
  • برای پیام اعتبارسنجی از error استفاده کنید تا tone و hierarchy استاندارد بماند.

انجام ندهید

  • برای این الگو از TaavTooltip شناور یا آیکن tooltip استفاده نکنید.
  • Dropdown را به‌عنوان الگوی پیش‌فرض برای انتخاب‌های محدود کسب‌وکار در FieldBlock نشان ندهید.
  • ستاره قرمز را به‌صورت دستی کنار label ننویسید.
  • layout محلی label / input / helper با Tailwind صفحه‌ای نسازید وقتی TaavFieldBlock کافی است.