Bangladesh

NID input

10, 13 or 17 digits, grouped as printed; names the kind and never accepts a wrong length.

NID, smart card

NID, old 17 digits

nid-input.tsx

"use client";

import { FormField, NidInput } from "@waveinno/ui";

export default function NidDemo() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <FormField label="NID, smart card">
        <NidInput defaultValue="1234567890" />
      </FormField>
      <FormField label="NID, old 17 digits">
        <NidInput defaultValue="19901234567890123" />
      </FormField>
    </div>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { FormField, NidInput } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<NidInput>

src/components/ui/nid-input.tsx

Prop	Type	Default
`value`	`string`	—
`defaultValue`	`string`	`""`
`onValueChange`	`(digits: string, info: { valid: boolean; kind: NidKind \| null }) => void`	—
`state`	`InputState`	`"default"`
`labels`	`Partial<Record<NidKind, string>>`	—

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

<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`	—
`children`required	`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