IbanInput

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

IbanInput.tsx

Storybook

IbanInput · Playground

IbanInput, @bigbang/ui paketindedir.

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

<IbanInput label="IBAN" name="iban" onValueChange={(iban, { valid }) => setIban(valid ? iban : null)} />;

normalizeIban, formatIban ve isValidIban yardımcıları da dışa aktarılır.

Özellikler

labelZorunlu

Açıklama

Alanın görünen etiketi. Ekran okuyucular TR'den sonraki 24 rakamın yazılacağını da duyar.

Tür

string

description

Açıklama

Alanın altındaki yardım metni; aria-describedby ile bağlanır.

Tür

ReactNode

error

Açıklama

Verildiğinde alan geçersiz işaretlenir ve bu mesaj yerleşik mesajların yerine geçer.

Tür

string

invalid

Açıklama

Alanı mesajsız geçersiz işaretler; örneğin mesaj bir hata özetindeyse.

Tür

boolean

Varsayılan

false

required

Açıklama

Değer zorunludur: giriş required alır ve etiket işaretlenir.

Tür

boolean

Varsayılan

false

necessityIndicator

Açıklama

Formun hangi alanları işaretlediği: required zorunluları, optional diğerlerini.

Tür

'required' | 'optional'

Varsayılan

'required'

size

Açıklama

Giriş yüksekliği: 32, 36 ve 40 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

value

Açıklama

Boşluklu ya da boşluksuz denetimli IBAN ('TR33 0006…'). onValueChange ile birlikte verin.

Tür

string

defaultValue

Açıklama

Denetimsiz alanda başlangıç IBAN'ı.

Tür

string

onValueChange

Açıklama

Boşluksuz IBAN ('TR3300…', boşken '') ve tam olup olmadığı ile denetimi geçip geçmediği bilgisiyle çağrılır.

Tür

(value: string, state: { valid: boolean; complete: boolean; }) => void

readOnly

Açıklama

Değer okunabilir, odaklanabilir ve kopyalanabilir ama değiştirilemez.

Tür

boolean

Varsayılan

false

disabled

Açıklama

Alanı ve etiketini devre dışı bırakır; değer formla gönderilmez.

Tür

boolean

Varsayılan

false

name

Açıklama

Alan adı; form IBAN'ı boşluksuz alır.

Tür

string

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="iban-input" ve geçerliyken data-valid.
• data-part: box, prefix, control, valid.