PinInput
Her karakter için bir hücreyle tek kullanımlık kod ve PIN girişi. Yazdıkça ileri, Backspace ile geri gider; yapıştırma ya da SMS otomatik doldurma tüm hücreleri doldurur.
Telefonuna 6 haneli bir kod gönderdik.
<Field label="Doğrulama kodu" description="Telefonuna 6 haneli bir kod gönderdik.">
<PinInput
value={code}
onValueChange={setCode}
onComplete={verify}
getCellLabel={(i, n) => n + " karakterden " + i + "."}
name="otp"
/>
</Field>Import
import { PinInput } from "@meridui/react";Örnekler
Uzunluk, maske ve karakterler
<PinInput aria-label="PIN" length={4} mask size="lg" />
<PinInput aria-label="Davet kodu" length={5} type="alphanumeric" placeholder="·" />
<PinInput aria-label="Geçersiz kod" length={4} defaultValue="1234" invalid />API referansı
Bir div role="group" render'lar; aria-label, aria-labelledby ya da bir Field ile ad ver. Ref gruba gider.
| Prop | Tip | Varsayılan | Açıklama |
|---|---|---|---|
length | number | 6 | Hücre sayısı. |
value | string | – | Controlled kod. |
defaultValue | string | "" | Uncontrolled kullanımda başlangıç kodu. |
onValueChange | (value: string) => void | – | Her değişimde çağrılır. |
onComplete | (value: string) => void | – | Tüm hücreler dolunca bir kez çağrılır. |
type | "numeric" | "alphanumeric" | "numeric" | Kabul edilen karakterler; numeric mobilde sayı klavyesini açar. |
mask | boolean | false | Karakterleri şifre gibi gizler. |
placeholder | string | – | Boş hücrelerin placeholder'ı. |
getCellLabel | (index: number, length: number) => string | Character {i} of {n} | Her hücrenin erişilebilir adı. |
size | "sm" | "md" | "lg" | "md" | Hücre boyutu. |
invalid / disabled / required | boolean | – | Durumlar; Field içinde ondan gelir. |
autoFocus | boolean | false | Mount'ta ilk boş hücreye focus verir. |
name | string | – | Kodun tamamını taşıyan gizli input. |
Stil verme
| Sınıf | Eleman |
|---|---|
.mrd-pin-input | Grup (data-size, data-invalid, data-disabled) |
.mrd-pin-input__cell | Her <input> (data-filled) |
Erişilebilirlik
Her hücre, adı olan bir grubun içinde etiketli bir metin alanıdır. İlk hücrede autocomplete="one-time-code" vardır; tarayıcı SMS kodunu önerebilir. Kodda boşluk kalmaz: kodun sonundan ötesine yazılan karakter ilk boş hücreye gider.
| Tuş | Ne yapar |
|---|---|
| 0–9A–Z | Hücreyi doldurur ve sonrakine geçer. |
| Backspace | Hücreyi (boşsa bir öncekini) temizler ve geri gider. |
| Delete | Hücredeki karakteri siler; sonraki karakterler geri kayar. |
| ArrowLeftArrowRight | Önceki / sonraki hücre (RTL'de ters). |
| HomeEnd | İlk hücre / son dolu hücre. |
İlgili sayfalar
- Input — kullanıcıların yazmak yerine kopyaladığı kodlar için.
- Kimlik doğrulama deseni.