IbanInput

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

TR öneki kutuda sabittir; kullanıcı yalnızca 24 rakamı yazar. Yapıştırılan “TR33 0006 …” önekini bırakır.

IBAN (TR'den sonraki 24 rakam)

TR

Hesap belgenizdeki IBAN'ı yazın ya da yapıştırın.

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <IbanInput label="IBAN" description="Hesap belgenizdeki IBAN'ı yazın ya da yapıştırın." className="max-w-sm" />
  );
}

Geçerli ve geçersiz

Mod 97 denetimini geçen IBAN onay işareti alır; son rakamı değişmiş örnek hata gösterir.

IBAN (TR'den sonraki 24 rakam)

TR

Örnek IBAN yayımlanmış bir örnektir; gerçek bir hesap değildir.

IBAN geçerli

IBAN (TR'den sonraki 24 rakam)

TR

Bu IBAN geçerli değil; rakamları kontrol edin.

AçıkKoyu

Kodu kopyala

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

export default function States() {
  return (
    <div className="flex max-w-sm flex-col gap-lg">
      <IbanInput label="IBAN" description="Örnek IBAN yayımlanmış bir örnektir; gerçek bir hesap değildir." defaultValue="TR330006100519786457841326" />
      <IbanInput label="IBAN" defaultValue="TR330006100519786457841327" />
    </div>
  );
}

Açık ve koyu mod

Kutu TextInput ile aynı token’ları kullanır.

Açık

IBAN (TR'den sonraki 24 rakam)

TR

Örnek IBAN yayımlanmış bir örnektir; gerçek bir hesap değildir.

IBAN geçerli

IBAN (TR'den sonraki 24 rakam)

TR

Bu IBAN geçerli değil; rakamları kontrol edin.

Koyu

IBAN (TR'den sonraki 24 rakam)

TR

Örnek IBAN yayımlanmış bir örnektir; gerçek bir hesap değildir.

IBAN geçerli

IBAN (TR'den sonraki 24 rakam)

TR

Bu IBAN geçerli değil; rakamları kontrol edin.

Kodu kopyala

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

export default function States() {
  return (
    <div className="flex max-w-sm flex-col gap-lg">
      <IbanInput label="IBAN" description="Örnek IBAN yayımlanmış bir örnektir; gerçek bir hesap değildir." defaultValue="TR330006100519786457841326" />
      <IbanInput label="IBAN" defaultValue="TR330006100519786457841327" />
    </div>
  );
}