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

৳

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
PropTypeDefaultDescription
valuenumber | null—
defaultValuenumber | nullnull
onValueChange(value: number | null) => void—
minnumber—
maxnumber—
decimalsnumber0Digits 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.
symbolReact.ReactNode"৳"The sign before the number. Default "৳".
stateInputState"default"

Also takes Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "min" | "max">.

<FormField>

src/components/ui/form-field.tsx
PropTypeDefaultDescription
labelReact.ReactNode—
htmlForstring—The control's id, so clicking the label focuses it.
requiredboolean—
hintReact.ReactNode—
errorReact.ReactNode—
warningReact.ReactNode—
successReact.ReactNode—
count{ value: number; max: number }—Character counter, e.g. { value: note.length, max: 240 }.
classNamestring—
childrenrequiredReact.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