Bank Input

Payment-ready Iranian card and Shaba fields. They normalize mixed paste formats, force a readable LTR tabular layout, validate checksums, and identify the bank while the customer types. Persian and Arabic-Indic numerals are normalized with Normalize Persian Digits.

Last updated August 12, 2026

Overview

Installation

Install the inputs, their bank utility, input-group primitives, and the PersianLabs icon package in one step.

$ npx shadcn@latest add https://ui.persian-labs.ir/r/bank-input.json

Usage

import { CardNumberInput } from "@/components/ui/bank-input"
 
export function Example() {
  return <CardNumberInput />
}

Examples

Shaba

The IR prefix is presented as an input-group prefix. Pasting an entire IBAN, with or without separators, removes IR and normalizes the remaining 24 digits.

Zod Validation

Use the exported checksum validators in Zod refinements, while the inputs surface invalid complete values immediately.

Separator

Card numbers use spaces by default (1234 1234 1234 1234). Pass separator to use any other display delimiter; the stored value always stays as 16 plain digits.

Supported Banks

هر ورودی یک شماره کارت معتبر نمونه دارد؛ لوگوی انتهایی نشان می‌دهد که تشخیص بانک برای همه بانک‌های پشتیبانی‌شده فعال است.

RTL

Labels, descriptions, and bank names follow the surrounding RTL interface while the card and Shaba values remain intentionally LTR. Persian digits are normalized during input.

API Reference

CardNumberInput

ShabaInput