OtpInput

Ne zaman kullanılır

OtpInput SMS ya da e-postayla gönderilen tek kullanımlık kodlar ve kısa PIN’ler içindir.

Ne zaman kullanılmaz

• Şifre için: PasswordInput kullanın.
• Uzunluğu bilinmeyen bir kod için: TextInput kullanın.

Anatomi

Doğrulama kodu

Size gönderilen 6 haneli kodu girin.

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return <OtpInput label="Doğrulama kodu" description="Size gönderilen 6 haneli kodu girin." groupSize={3} />;
}

1. Etiket: İlk kutuya bağlıdır.
2. Kutular: Tek şeritte birleşen 32, 36 ya da 40 px kareler; her biri bir karakter. groupSize ile her grup ayrı bir şerittir. Boş etkin kutuda yanıp sönen bir imleç görünür.
3. Ayırıcı: groupSize ile; ekran okuyucu atlar.
4. Açıklama ve hata: Kodun altında.

Davranış

• Yazınca odak sonraki kutuya geçer; Backspace geri gider. Sol ve sağ oklar kutular arasında dolaşır.
• Yapıştırma ve tarayıcının tek kullanımlık kod önerisi (autocomplete="one-time-code") bütün kutuları doldurur.
• validationType dışındaki karakterler düşürülür.
• Kod tek bir değer olarak gönderilir; autoSubmit tamamlanınca formu gönderir.

Yönergeler

• Kodun nereye gönderildiğini açıklamada yazın.
• Yanlış kodda değeri temizleyin ve odağı ilk kutuya verin; hatayı kodun altında gösterin.
• Yeniden gönderme için kodun altına CountdownTimer ile bir buton koyun.
• mask yalnızca PIN gibi gizli kodlar için; SMS kodu gizlenmez.

İçerik

• Etiket: “Doğrulama kodu”. Açıklama: “Size gönderilen 6 haneli kodu girin.”

Türkçe	İngilizce
Rakam {index} / {length}	Digit {index} of {length}
Karakter {index} / {length}	Character {index} of {length}

İlgili bileşenler

• PasswordInput: Şifre.
• CountdownTimer: Yeniden gönderme süresi.