مبلغ
amount-inputکامپوننتجداکنندهی هزارگان هنگام تایپ، واحد بعد از عدد، و مبلغ به حروف زیر فیلد: «یک میلیون و دویست و پنجاه هزار تومان».
تومان
یک میلیون و دویست و پنجاه هزار تومان
نصب
با CLI
اگر هنوز init نکردهاید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور قطعه و وابستگیهایش را مینویسد.
$ npx vibefarsi add amount-inputنصب دستی
محتوای تب «کد» را در
components/ui/amount-input.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { AmountInput } from "@/components/ui/amount-input"23<AmountInput min={10_000} max={50_000_000} quick={[100_000, 500_000, 1_000_000]} onChange={setAmount} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| value / defaultValue | number | null | - | مقدار عددی خام؛ نمایش با «٬» و ارقام فارسی. |
| unit | string | «تومان» | واحد در انتهای فیلد و آخر جملهی حروفی. |
| words | boolean | true | نمایش مبلغ به حروف زیر فیلد. |
| quick | number[] | - | چیپهای مبلغ آماده با برچسب کوتاه: «۵۰۰ هزار»، «۱ میلیون». |
نکتههای راستچین
- تبدیل عدد به حروف در lib/number-to-words.ts است و جدا هم قابل استفاده است: numberToWords، tomanToWords، rialToWords.
- «هزار» بدون «یک» میآید (هزار تومان، نه یک هزار تومان)؛ از میلیون به بالا «یک میلیون».