Bangladesh
Taka input
Lakh grouping as you type, the cursor kept in place, the amount in words; holds a number.
৳
Stored as the number 1250000
৳
taka-input.tsx
"use client";
import { FormField, TakaInput } from "@waveinno/ui";
import * as React from "react";
export default function TakaDemo() {
const [amount, setAmount] = React.useState<number | null>(1250000);
return (
<div className="grid gap-6 md:grid-cols-2">
<FormField label="Monthly revenue target" hint={amount == null ? "Empty" : `Stored as the number ${amount}`}>
<TakaInput value={amount} onValueChange={setAmount} />
</FormField>
<FormField label="Refund, with paisa, words in Bangla">
<TakaInput defaultValue={450.5} decimals={2} words="bn" max={100000} />
</FormField>
</div>
);
}Import#
Everything comes from the package root. The example above uses:
your-component.tsx
import { FormField, TakaInput } from "@waveinno/ui";Props#
Read from the source of this version, so they match the code exactly.
<TakaInput>
src/components/ui/taka-input.tsx| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | — | |
defaultValue | number | null | null | |
onValueChange | (value: number | null) => void | — | |
min | number | — | |
max | number | — | |
decimals | number | 0 | Digits after the point. 0 (default) for whole taka, 2 for paisa. |
words | "latin" | "bn" | false | "latin" | The amount in words under the field: "latin" (12.35 lakh), "bn" (১২.৩৫ লাখ) or false. |
symbol | React.ReactNode | "৳" | The sign before the number. Default "৳". |
state | InputState | "default" |
Also takes Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "min" | "max">.
<FormField>
src/components/ui/form-field.tsx| Prop | Type | Default | Description |
|---|---|---|---|
label | React.ReactNode | — | |
htmlFor | string | — | The control's id, so clicking the label focuses it. |
required | boolean | — | |
hint | React.ReactNode | — | |
error | React.ReactNode | — | |
warning | React.ReactNode | — | |
success | React.ReactNode | — | |
count | { value: number; max: number } | — | Character counter, e.g. { value: note.length, max: 240 }. |
className | string | — | |
childrenrequired | React.ReactNode | — |
Install#
If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.
$ npm install @waveinno/ui