Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    IbanInput

    A Turkish IBAN field: a fixed TR prefix, digits grouped in fours as they are typed, and a mod 97 check.

    Storybook
    Storybook
    Source
    Source

    When to use

    Section titled “When to use”

    When a Turkish IBAN is needed: an account details form, profile settings.

    When not to use

    Section titled “When not to use”
    • For other countries’ IBANs: This version knows only the TR format (26 characters).
    • To only show an account: Use formatIban for formatted text or MaskedValue to hide it.

    Anatomy

    Section titled “Anatomy”

    Type or paste the IBAN from your account document.

    import { IbanInput, Provider } from '@bigbang/ui';
    

    export default function Default() {
      return (
        <Provider locale="en-GB">
          <IbanInput label="IBAN" description="Type or paste the IBAN from your account document." className="max-w-sm" />
        </Provider>
      );
    }
    1. Label: Read with what to type: “IBAN (the 24 digits after TR)”.
    2. TR prefix: Fixed; it cannot be changed.
    3. Digits: Grouped in fours: 33 0006 1005 …
    4. Check mark: Appears when the check passes.
    5. Description and error.

    Behaviour

    Section titled “Behaviour”
    • Only digits get in; anything past 24 digits is cut. Spaces are added while typing and the caret stays after the same digit.
    • A pasted IBAN loses its “TR” prefix, spaces and dashes.
    • When 24 digits are in, the check runs: check digits from 02 to 98, the reserve digit after the bank code set to 0, and ISO 7064 mod 97 (with bigint). Any failure shows at once.
    • The incomplete message shows on leaving the field and goes away when typing resumes.
    • The form value is the IBAN without spaces (“TR33…”).

    Guidelines

    Section titled “Guidelines”
    • “IBAN” is enough for the label; the box shows the TR prefix.
    • The check only says the digits are consistent; confirm the account and its holder on the server.
    • Do not use a placeholder; the grouping already shows the format.

    Content

    Section titled “Content”
    Key TR EN
    ui.iban-input.digits TR’den sonraki 24 rakam the 24 digits after TR
    ui.iban-input.invalid Bu IBAN geçerli değil; rakamları kontrol edin. This IBAN is not valid; check the digits.
    ui.iban-input.incomplete IBAN 24 rakam içermeli; {count} rakam girildi. The IBAN needs 24 digits; {count} entered.
    ui.iban-input.valid IBAN geçerli IBAN is valid
    Section titled “Related components”