IbanInput

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

The TR prefix is fixed in the box; people type only the 24 digits. A pasted “TR33 0006 …” drops its prefix.

IBAN (the 24 digits after TR)

TR

Type or paste the IBAN from your account document.

LightDark

Copy code

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>
  );
}

Valid and invalid

An IBAN that passes mod 97 gets a check mark; the sample with a changed last digit shows an error.

IBAN (the 24 digits after TR)

TR

The sample IBAN is a published example, not a real account.

IBAN is valid

IBAN (the 24 digits after TR)

TR

This IBAN is not valid; check the digits.

LightDark

Copy code

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-lg">
        <IbanInput label="IBAN" description="The sample IBAN is a published example, not a real account." defaultValue="TR330006100519786457841326" />
        <IbanInput label="IBAN" defaultValue="TR330006100519786457841327" />
      </div>
    </Provider>
  );
}

Light and dark mode

The box uses the same tokens as TextInput.

Light

IBAN (the 24 digits after TR)

TR

The sample IBAN is a published example, not a real account.

IBAN is valid

IBAN (the 24 digits after TR)

TR

This IBAN is not valid; check the digits.

Dark

IBAN (the 24 digits after TR)

TR

The sample IBAN is a published example, not a real account.

IBAN is valid

IBAN (the 24 digits after TR)

TR

This IBAN is not valid; check the digits.

Copy code

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-lg">
        <IbanInput label="IBAN" description="The sample IBAN is a published example, not a real account." defaultValue="TR330006100519786457841326" />
        <IbanInput label="IBAN" defaultValue="TR330006100519786457841327" />
      </div>
    </Provider>
  );
}