مبلغ
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.
- «هزار» بدون «یک» میآد (هزار تومان، نه یک هزار تومان) ولی از میلیون به بالا «یک میلیون» نوشته میشه.