Kiritiş · molecule
OTP / PIN kod
Bir martalik kod yoki PIN: har belgi alohida katakda. Yozilganda keyingi katakka ötadi, Backspace böş katakda orqaga qaytaradi, qöyiş (paste) va SMS-avto-töldiriş hamma kataklarga taqsimlanadi. Raqam yoki harf-raqam, yaşirin (●), 4/6 katak, ajratgiç, xato (silkiniş) va «Qayta yuboriş» taymeri.
6 xonali kod SMS orqali yuborildi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | lg | md |
data-state | complete barça kataklar töldi (xulq qöyadi)error muallif qöyadi — silkinadi | — |
Anatomiya
- root
.fx-otpşart - cells
.fx-otp__cellsşart - cell
.fx-otp__cellşart - separator
.fx-otp__sepixtiyoriy - message
.fx-otp__msgixtiyoriy - resend
.fx-otp__resendixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| 0–9 / harf | Belgini yozadi va keyingi katakka ötadi |
| Backspace | Katakni tozalaydi; böş bölsa oldingisiga qaytib tozalaydi |
| ← →, Home, End | Kataklar orasida yuriş |
| Ctrl+V | Kodni kataklarga taqsimlaydi |
Kataklar role="group" içida, guruh nomi aria-labelledby bilan; har katak «1-belgi, 6 tadan» nomini oladi. Birinçi katak autocomplete="one-time-code" (SMS-avto-töldiriş). Xato matni aria-live. Taymer har soniya aytilmaydi.
Kod
AI uçun: qaçon işlatiladi
- SMS, email yoki ilova orqali kelgan qisqa kodni kiritiş; PIN.
npx foxui add otp
<span class="fx-label" id="otp1-l">Tasdiqlaş kodi</span>
<div class="fx-otp" data-fx-otp id="otp1">
<div class="fx-otp__cells" role="group" aria-labelledby="otp1-l" aria-describedby="otp1-m">
<input class="fx-otp__cell"><input class="fx-otp__cell"><input class="fx-otp__cell">
<span class="fx-otp__sep" aria-hidden="true"></span>
<input class="fx-otp__cell"><input class="fx-otp__cell"><input class="fx-otp__cell">
</div>
<input type="hidden" name="kod" data-otp-value>
<p class="fx-otp__msg" id="otp1-m" aria-live="polite">6 xonali kod SMS orqali yuborildi.</p>
<button class="fx-otp__resend" type="button" data-resend data-seconds="30">Qayta yuboriş</button>
</div>Tokenlar: --fx-bg-field --fx-bg-muted --fx-bg-surface --fx-border-color-error --fx-border-color-field --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-md --fx-ease-standard --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-regular --fx-font-weight-semibold --fx-knob-pill --fx-motion-fast --fx-motion-instant --fx-motion-slow --fx-radius-circle --fx-radius-control --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-disabled --fx-text-error --fx-text-primary --fx-text-tertiary