OTP Input

FREE

Kutucuklu, gruplanabilen, gizlenebilen, yapıştırma ve SMS otomatik doldurma destekli tek kullanımlık kod alanı.

Canlı düzenle

Ayarları değiştir; bileşen ve kodu anında güncellensin.

Ayarlar

Hane

Grup boyutu (0 = yok)

Karakterler

Gizle

Boyut

Hatalı

Odak rengi

Kod

import { OtpInput } from "@/components/ui/otp-input";

<OtpInput
  groupSize={3}
  onComplete={(code) => verify(code)}
/>

Terminal

npx @bloxa/cli add otp-input
# or: npx shadcn@latest add @bloxa/otp-input

Kod yapıştırılabilir; telefonda SMS'ten otomatik doldurulur. Tamamlanınca onComplete çalışır.

Enter the 6-digit code we sent you.

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

Özellik	Tip	Varsayılan	Açıklama
length	number	6	Hane sayısı.
value / defaultValue	string	—	Kod değeri.
onValueChange	(value: string) => void	—	Her değişiklikte çağrılır.
onComplete	(value: string) => void	—	Tüm kutular dolunca çağrılır.
pattern	"numeric" \| "alphanumeric"	"numeric"	Kabul edilen karakterler.
groupSize	number	—	Her N kutudan sonra ayraç.
mask	boolean	false	Karakterleri nokta ile gizler.
size	"md" \| "lg"	"md"	Kutu boyutu.