TaavUI Lab
Business Components

TaavPercentageInput

ورودی درصد برای فرم‌های کسب‌وکار — علامت % داخل فیلد و محدوده min/max قابل تنظیم. برای پیش‌پرداخت قرارداد، جریمه، تخفیف و نرخ‌های حقوقی.

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

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

نمای مرجع (RTL)

Screenshot-like demo — قرارداد

درصد پیش‌پرداخت از کل مبلغ

استفاده پایه

پیش‌نمایش
<TaavPercentageInput defaultValue={4} min={0} max={100} />

Controlled

پیش‌نمایشvalue: 4

Min / Max

پیش‌نمایش

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

  • پیش‌فرض min=0 و max=100 است
  • مقادیر خارج از بازه در blur محدود می‌شوند

States

پیش‌نمایش

Light / Dark

Props

Propنوعپیش‌فرضتوضیح
value / defaultValuenumber | stringمقدار کنترل‌شده یا اولیه
onValueChange(value: number | null) => voidعدد نرمال‌شده
min / maxnumber0 / 100بازه مجاز — clamp در blur
size'sm' | 'md' | 'lg'mdارتفاع کنترل
tone'neutral' | 'success' | 'warning' | 'danger'neutralرنگ مرز
invalidbooleanfalseخطای خارجی یا خارج از بازه
inputMode'numeric' | 'decimal'numericورود اعشاری اختیاری
disabled / readOnlybooleanحالت غیرفعال یا فقط خواندنی

Design Specs

Affix% (start, LTR shell)
Radiusvar(--taav-input-radius-xl)
Default range0 – 100
Invalidvar(--taav-input-focus-ring-danger)

Do / Don't

انجام دهید

  • برای درصدهای قرارداد از min/max صریح استفاده کنید
  • داخل TaavFieldBlock برای label و tooltip ثابت قرار دهید

انجام ندهید

  • علامت % را به صورت دستی به TaavInput اضافه نکنید
  • validation یا business logic داخل کامپوننت ننویسید