Kiritiş · molecule
Telefon raqam
Telefon maydoni mamlakat tanlagiçi bilan: çapda bayroq va kod (standart — Özbekiston +998), öngda raqam mamlakat niqobi bilan («90 123-45-67»). Formaga E.164 qiymat (+998901234567) yaşirin inputda ketadi. Töliq raqam yozilsa yoki joylansa («+7 701 …») mamlakat özi aniqlanadi.
Tasdiqlaş kodi SMS orqali şu raqamga yuboriladi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmdlg | md |
data-country | UZ Boşlanğiç mamlakat (ISO 3166). Röyxat: UZ KZ KG TJ TM RU TR KR AE US DE GB | UZ |
data-countries | UZ KZ KG TJ RU Röyxatni çeklaş (böş joy bilan) | hammasi |
Anatomiya
- root
.fx-phoneşart - country
.fx-phone__countryşart - flag
.fx-phone__flagixtiyoriy - code
.fx-phone__codeixtiyoriy - input
.fx-phone__inputşart - popover
.fx-phone__popixtiyoriy - search
.fx-phone__searchixtiyoriy - list
.fx-phone__listixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter / Space (tugmada) | Mamlakatlar röyxatini oçadi, fokus qidiruvga |
| ↑ ↓, Home, End | Faol mamlakat |
| Harflar / raqam | Nomi yoki kodi böyiça qidiradi |
| Enter | Tanlaydi, fokus raqam maydoniga qaytadi |
| Esc | Röyxatni yopadi |
Mamlakat tugmasi aria-label «Mamlakat: Özbekiston, +998», aria-haspopup=listbox va aria-expanded oladi. Röyxatda qidiruv maydoni role=combobox, faol variant aria-activedescendant bilan. Xato — .fx-field[data-invalid] va aria-invalid, töliq raqam — ✓ belgisi (rang yolğiz emas).
Naqş: WAI-ARIA APG combobox · rol group
Kod
AI uçun: qaçon işlatiladi
- Röyxatdan ötiş, buyurtma, ariza formasida telefon raqam (SMS tasdiq bilan).
- Mijozlar bir neçta mamlakatdan bölişi mumkin bölgan joyda.
- Karta raqami, sana kabi boşqa qat'iy formatlar →
mask - Bir martalik SMS kodni kiritiş →
otp - Mamlakat kodini maydon içiga matn sifatida yozdirmang — kod tugmada turadi, foydalanuvçi faqat milliy raqamni teradi.
- Raqamni «998901234567» körinişida körsatmang — niqob guruhlab körsatadi, serverga E.164 ketadi.
- Faqat bayroq bilan mamlakatni bildirmang — kod (+998) ham yoniga yoziladi, ekran öquvçi nomini oladi.
npx foxui add phone
<div class="fx-field">
<label class="fx-label" for="ph1" data-required>Telefon raqam</label>
<div class="fx-phone" data-fx-phone data-country="UZ">
<button class="fx-phone__country" type="button" popovertarget="ph1-pop"></button>
<input class="fx-phone__input" id="ph1" name="telefon" required aria-describedby="ph1-h">
<div class="fx-popover fx-phone__pop" popover id="ph1-pop"></div>
</div>
<p class="fx-hint" id="ph1-h">Tasdiqlaş kodi SMS orqali şu raqamga yuboriladi.</p>
</div>
<div class="fx-field">
<label class="fx-label" for="ph2">Qöşimça raqam</label>
<div class="fx-phone" data-fx-phone data-size="sm" data-countries="UZ KZ KG TJ RU">
<button class="fx-phone__country" type="button" popovertarget="ph2-pop"></button>
<input class="fx-phone__input" id="ph2" name="telefon2" value="+7 701 555 12 34">
<div class="fx-popover fx-phone__pop" popover id="ph2-pop"></div>
</div>
</div>Tokenlar: --fx-bg-field --fx-bg-muted --fx-border-color-default --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-control-h-sm --fx-ease-standard --fx-fg-success --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-weight-semibold --fx-knob-field-fill --fx-knob-pill --fx-motion-fast --fx-motion-press --fx-popover-width --fx-radius-control --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-disabled --fx-text-primary --fx-text-secondary --fx-text-tertiary