OtpInput

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

OtpInput.tsx

Storybook

OtpInput · Playground

OtpInput, @bigbang/ui paketindedir.

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

<OtpInput label="Doğrulama kodu" groupSize={3} onValueComplete={verify} />;

Özellikler

labelZorunlu

Açıklama

Görünen etiket; ilk kutuya bağlanır. Diğer kutular konumlarıyla adlandırılır ('Rakam 2 / 6').

Tür

string

description

Açıklama

Kodun altındaki yardım metni, ör. kodun nereye gönderildiği. aria-describedby ile bağlanır.

Tür

ReactNode

error

Açıklama

Verilirse bütün kutular geçersiz olur ve mesaj kodla birlikte okunur.

Tür

string

invalid

Açıklama

Kodu mesajsız geçersiz işaretler.

Tür

boolean

Varsayılan

false

length

Açıklama

Koddaki karakter sayısı.

Tür

number

Varsayılan

6

groupSize

Açıklama

Her groupSize kutudan sonra bir ayırıcı çizer, ör. '123 456' için 3. Ekran okuyucu okumaz.

Tür

number

validationType

Açıklama

Hangi karakterlerin kabul edileceği: yalnızca rakam, harf ve rakam ya da yalnızca harf. Diğerleri yazarken ve yapıştırırken düşürülür.

Tür

'numeric' | 'alpha' | 'alphanumeric'

Varsayılan

'numeric'

value

Açıklama

Kontrollü kod. onValueChange ile birlikte verin.

Tür

string

defaultValue

Açıklama

Kontrolsüz alanın ilk kodu.

Tür

string

onValueChange

Açıklama

Yazma, silme ve yapıştırmada yeni kodla çağrılır.

Tür

(value: string) => void

onValueComplete

Açıklama

Bütün kutular dolunca, yapıştırma ya da otomatik doldurmayla da, çağrılır. Kodu burada doğrulayın.

Tür

(value: string) => void

autoSubmit

Açıklama

Kod tamamlanınca çevreleyen formu hemen gönderir.

Tür

boolean

Varsayılan

false

mask

Açıklama

Karakterleri nokta olarak gizler; PIN gibi gizli kodlar için.

Tür

boolean

Varsayılan

false

size

Açıklama

Kutu boyutu: 32, 36 ve 40 px kare.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

required

Açıklama

Kod form için zorunludur.

Tür

boolean

Varsayılan

false

disabled

Açıklama

Bütün kutuları ve etiketi devre dışı bırakır.

Tür

boolean

Varsayılan

false

name

Açıklama

Form gönderildiğinde kullanılan alan adı; kodun tamamı tek değer olarak gider.

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="otp-input": kök öğe üzerinde.
• data-part: label, group, slot, separator, description, error.
• data-complete: grup üzerinde, kod tamamken (Base UI).