Doğrulama kodu
SMS ya da e-postayla gelen tek kullanımlık kod için her haneye ayrı bir kutu gösterir. Kutular yalnızca rakam kabul eder; yapıştırılan kod kutulara kendiliğinden dağıtılır.
Temel kullanım
Varsayılan olarak 6 kutu gösterilir. Bir rakam yazılınca odak sonraki kutuya geçer, boş kutuda Backspace bir öncekine döner; harf gibi rakam olmayan karakterler kutuda kalmaz. Kod yapıştırıldığında rakamlar sırayla kutulara yerleşir ve odak son rakamın ardındaki kutuya geçer. İlk kutu autocomplete="one-time-code" taşır; telefonlar SMS kodunu otomatik önerebilir. Her kutu ekran okuyuculara "1. hane", "2. hane" diye okunur.
<acun:input-otp label="SMS ile gelen kod" />| Prop | Değerler |
|---|---|
label | Kutuların üstündeki etiket |
Hane sayısı
Kutu sayısını length belirler. Kodun gönderildiği gizli alanın adı name ile değiştirilir; verilmezse wire:model özelliğinin adı, o da yoksa code kullanılır. Başlangıç kodunu value ile verebilirsiniz.
<acun:input-otp :length="4" name="pin" label="4 haneli PIN" />| Prop | Değerler |
|---|---|
length | 6 (varsayılan) |
name | wire:model adı ya da code |
value | Başlangıç kodu |
Formda ve Livewire ile
Klasik formda kutulardaki rakamlar birleştirilip gizli alanla gönderilir. wire:model iki yönlüdür: yazılan kod özelliğe yazılır, sunucunun verdiği kod ($this->kod = '482615', reset()) kutulara dağıtılır. Gizli alan formun değişiklik takibine girer; kutuların kendisi sayılmaz. wire:key, class gibi diğer nitelikler dış kapsayıcıya eklenir. Bileşen doğrulama hatasını kendisi göstermez; mesajı @error ile altına ekleyin.
{{-- Klasik form: kod "code" adıyla gönderilir --}}
<form method="POST" action="{{ route('dogrulama.kontrol') }}">
@csrf
<acun:input-otp label="Doğrulama kodu" />
<acun:button type="submit" class="mt-4 w-full">Doğrula</acun:button>
</form>
{{-- Livewire --}}
<acun:input-otp wire:model="kod" label="Doğrulama kodu" />
@error('kod')
<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror| Prop | Değerler |
|---|---|
wire:model | Birleşik kod; iki yönlü |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
length | 6 | Kutu (hane) sayısı |
name | null | Kodun gönderildiği gizli alanın adı; yoksa wire:model adı, o da yoksa code |
label | null | Kutuların üstündeki etiket |
value | null | Başlangıç kodu (wire:model / x-model yokken); rakam dışı karakterler atılır |
wire:model / x-model | — | İki yönlü: sunucudan gelen kod kutulara dağıtılır |