TaavUI Lab
Form Composition

TaavFormField

ترکیب label، description، control و message — بدون React Hook Form.

import { TaavFormField, TaavInput } from "@repo/ui/taav";

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

استفاده پایه

Interactive RTL example

این نام در اسناد و تنظیمات نمایش داده می‌شود.

<TaavFormField label="نام کسب‌وکار" required error={errors.name}>
  <TaavInput invalid={Boolean(errors.name)} />
</TaavFormField>

Optional field

پیش‌نمایش

در صورت تمایل

Props

Propنوعپیش‌فرضتوضیح
labelReactNodeبرچسب فیلد
required / optionalbooleanنمایش الزامی/اختیاری
descriptionReactNodeمتن راهنما
messageReactNodeپیام info/success/warning
errorReactNodeپیام خطا — tone را danger می‌کند
htmlForstringاتصال label به control
children*ReactNodeTaavInput یا TaavTextarea

دسترس‌پذیری

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

  • htmlFor روی label و id روی input باید match کنند
  • error با role=alert در TaavFormMessage نمایش داده می‌شود

Do / Don't

انجام دهید

  • validation logic در app بماند — فقط UI از TaavUI

انجام ندهید

  • React Hook Form در این فاز اضافه نکنید