Kiritiş · pattern
Checkout
Tölov / checkout formasi (naqş): raqamlangan bölimlar — aloqa (telefon +998), yetkazib beriş usuli va manzil, tölov usuli (bank kartasi — raqam va muddat niqobi bilan, naqd, bölib tölaş); öngda yopişqoq buyurtma xulosasi — mahsulotlar, promo-kod, jami va «… söm tölaş». Yuborilayotganda forma öçadi, tugmada yuklaniş.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | submitting Yuborilmoqda — forma öçadi | — |
Anatomiya
- root
.fx-checkoutşart - main
.fx-checkout__mainşart - section
.fx-checkout__sectionixtiyoriy - title
.fx-checkout__titleixtiyoriy - step
.fx-checkout__stepixtiyoriy - row
.fx-checkout__rowixtiyoriy - options
.fx-checkout__optionsixtiyoriy - option
.fx-checkout__optionixtiyoriy - option-name
.fx-checkout__option-nameixtiyoriy - option-desc
.fx-checkout__option-descixtiyoriy - option-price
.fx-checkout__option-priceixtiyoriy - card
.fx-checkout__cardixtiyoriy - summary
.fx-checkout__summaryşart - summary-title
.fx-checkout__summary-titleixtiyoriy - items
.fx-checkout__itemsixtiyoriy - item
.fx-checkout__itemixtiyoriy - thumb
.fx-checkout__thumbixtiyoriy - qty
.fx-checkout__qtyixtiyoriy - name
.fx-checkout__nameixtiyoriy - meta
.fx-checkout__metaixtiyoriy - price
.fx-checkout__priceixtiyoriy - totals
.fx-checkout__totalsixtiyoriy - secure
.fx-checkout__secureixtiyoriy
Holatlar
submittingselected-option
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → ↑ ↓ | Yetkaziş va tölov usullari içida (native radio) |
| Enter | Formani yuboradi (promo-kod maydonida — kodni qöllaydi) |
Har bölim fieldset + legend (raqam aria-hidden, matn öqiladi). Usullar — native radio (strelkalar bilan), tanlangani ikki qavat çegara + radio nuqtasi. Xulosa aside + sarlavha; jami dl/dt/dd. Yuborilayotganda tugma aria-busy=true. Telefon, karta va promo-kod — öz komponentlarining klaviaturasi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Onlayn dökon, kurs yoki xizmat uçun buyurtma va tölov sahifasi.
- Tarif sotib oliş (karta + promo-kod + xulosa).
Işlatmang
- Köp qadamli, har qadam alohida ekran →
wizard - Mavjud obuna va hisob-fakturalar →
billing - Hamma maydonni bitta uzun ustunga tizmang — bölimlarni raqamlang (Aloqa · Yetkaziş · Tölov), xulosa yonda körinib tursin.
- Tölaş tugmasida faqat «Tölaş» demang — summani yozing («1 309 000 söm tölaş»).
- Karta maydonlarini naqd tanlanganda ham körsatmang — faqat «Bank kartasi»da oçiladi.
- Yuborişda tugmani ikki marta bosiş mumkin qilib qoldirmang — aria-busy va forma öçiriladi.
npx foxui add checkout
<form class="fx-checkout" onsubmit="event.preventDefault(); this.dataset.state='submitting'; this.querySelector('[type=submit]').setAttribute('aria-busy','true')">
<div class="fx-checkout__main">
<fieldset class="fx-checkout__section">
<legend class="fx-checkout__title"><span class="fx-checkout__step" aria-hidden="true">1</span>Aloqa</legend>
<div class="fx-checkout__row">
<label class="fx-field"><span class="fx-label" data-required>Ism familiya</span><input class="fx-input" name="ism" required autocomplete="name" placeholder="Jasur Abdullayev"></label>
<div class="fx-field"><label class="fx-label" for="co-tel" data-required>Telefon</label><div class="fx-phone" data-fx-phone data-countries="UZ KZ KG TJ RU"><button class="fx-phone__country" type="button" popovertarget="co-tel-pop"></button><input class="fx-phone__input" id="co-tel" name="telefon" required><div class="fx-popover fx-phone__pop" popover id="co-tel-pop"></div></div></div>
</div>
</fieldset>
<fieldset class="fx-checkout__section">
<legend class="fx-checkout__title"><span class="fx-checkout__step" aria-hidden="true">2</span>Yetkazib beriş</legend>
<div class="fx-checkout__options"><label class="fx-checkout__option"><span class="fx-check" data-type="radio"><input type="radio" name="yetkazish" value="kuryer" checked><span class="fx-check__box"></span></span><span class="fx-checkout__option-name">Kuryer</span><span class="fx-checkout__option-price">25 000 söm</span><span class="fx-checkout__option-desc">Toşkent böylab ertaga, 10:00–20:00</span></label><label class="fx-checkout__option"><span class="fx-check" data-type="radio"><input type="radio" name="yetkazish" value="punkt"><span class="fx-check__box"></span></span><span class="fx-checkout__option-name">Olib ketiş</span><span class="fx-checkout__option-price">Bepul</span><span class="fx-checkout__option-desc">Çilonzor filiali, bugun 18:00 dan</span></label></div>
<div class="fx-checkout__row">
<label class="fx-field"><span class="fx-label" data-required>Viloyat</span><span class="fx-select-wrap"><select class="fx-select" name="viloyat" required><option>Toşkent şahri</option><option>Toşkent viloyati</option><option>Samarqand</option><option>Farğona</option><option>Andijon</option></select></span></label>
<label class="fx-field"><span class="fx-label" data-required>Tuman</span><input class="fx-input" name="tuman" required placeholder="Yunusobod"></label>
</div>
<label class="fx-field"><span class="fx-label" data-required>Manzil</span><input class="fx-input" name="manzil" required autocomplete="street-address" placeholder="Amir Temur köçasi, 108-uy, 24-xonadon"></label>
<label class="fx-field"><span class="fx-label">Möljal yoki izoh</span><input class="fx-input" name="moljal" placeholder="Masalan, 45-maktab yonida, 3-podyezd"></label>
</fieldset>
<fieldset class="fx-checkout__section">
<legend class="fx-checkout__title"><span class="fx-checkout__step" aria-hidden="true">3</span>Tölov</legend>
<div class="fx-checkout__options"><label class="fx-checkout__option"><span class="fx-check" data-type="radio"><input type="radio" name="tolov" value="karta" checked data-pay="card"><span class="fx-check__box"></span></span><span class="fx-checkout__option-name">Bank kartasi</span><span class="fx-checkout__option-price"></span><span class="fx-checkout__option-desc">Uzcard yoki Humo — SMS kod bilan tasdiqlanadi</span></label><label class="fx-checkout__option"><span class="fx-check" data-type="radio"><input type="radio" name="tolov" value="naqd"><span class="fx-check__box"></span></span><span class="fx-checkout__option-name">Naqd pul</span><span class="fx-checkout__option-price"></span><span class="fx-checkout__option-desc">Kuryerga qabul qilganda</span></label><label class="fx-checkout__option"><span class="fx-check" data-type="radio"><input type="radio" name="tolov" value="nasiya"><span class="fx-check__box"></span></span><span class="fx-checkout__option-name">Bölib tölaş</span><span class="fx-checkout__option-price">0 %</span><span class="fx-checkout__option-desc">6 oyga, oyiga 218 200 sömdan</span></label></div>
<div class="fx-checkout__card">
<label class="fx-field"><span class="fx-label" data-required>Karta raqami</span><input class="fx-input" name="karta" data-fx-mask="#### #### #### ####" placeholder="8600 0000 0000 0000" autocomplete="cc-number" inputmode="numeric"></label>
<div class="fx-checkout__row"><label class="fx-field"><span class="fx-label" data-required>Amal qiliş muddati</span><input class="fx-input" name="muddat" data-fx-mask="##/##" placeholder="OO/YY" autocomplete="cc-exp" inputmode="numeric"></label><label class="fx-field"><span class="fx-label">Karta egasi</span><input class="fx-input" name="egasi" autocomplete="cc-name" placeholder="JASUR ABDULLAYEV"></label></div>
</div>
</fieldset>
</div>
<aside class="fx-checkout__summary" aria-labelledby="co-s">
<h2 class="fx-checkout__summary-title" id="co-s">Buyurtmangiz</h2>
<ul class="fx-checkout__items"><li class="fx-checkout__item"><span class="fx-checkout__thumb"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3.5 6.5L10 3l6.5 3.5v7L10 17l-6.5-3.5z M3.5 6.5L10 10l6.5-3.5M10 10v7" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg><span class="fx-checkout__qty" aria-label="1 dona">1</span></span><span class="fx-checkout__name">Simsiz quloqçin<span class="fx-checkout__meta">Qora</span></span><span class="fx-checkout__price">649 000 söm</span></li><li class="fx-checkout__item"><span class="fx-checkout__thumb"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3.5 6.5L10 3l6.5 3.5v7L10 17l-6.5-3.5z M3.5 6.5L10 10l6.5-3.5M10 10v7" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg><span class="fx-checkout__qty" aria-label="2 dona">2</span></span><span class="fx-checkout__name">Telefon ğilofi<span class="fx-checkout__meta">Şaffof · 2 dona</span></span><span class="fx-checkout__price">378 000 söm</span></li><li class="fx-checkout__item"><span class="fx-checkout__thumb"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3.5 6.5L10 3l6.5 3.5v7L10 17l-6.5-3.5z M3.5 6.5L10 10l6.5-3.5M10 10v7" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg><span class="fx-checkout__qty" aria-label="1 dona">1</span></span><span class="fx-checkout__name">Tez quvvatlagiç 30 W<span class="fx-checkout__meta">Oq</span></span><span class="fx-checkout__price">257 000 söm</span></li></ul>
<div class="fx-coupon" data-fx-coupon data-codes='{"KUZ10":{"value":"−128 400 soʻm"}}'><div class="fx-coupon__form"><input class="fx-input fx-coupon__input" data-size="sm" name="promo" aria-label="Promo-kod" placeholder="Promo-kod"><button class="fx-btn" data-size="sm" data-coupon-apply>Qöllaş</button></div></div>
<dl class="fx-checkout__totals">
<div><dt>Mahsulotlar (4 dona)</dt><dd>1 284 000 söm</dd></div>
<div><dt>Yetkazib beriş</dt><dd>25 000 söm</dd></div>
<div data-type="total"><dt>Jami</dt><dd>1 309 000 söm</dd></div>
</dl>
<button class="fx-btn" type="submit" data-variant="primary" data-size="lg" data-width="full">1 309 000 söm tölaş</button>
<p class="fx-checkout__secure"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="4.5" y="9" width="11" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M7 9V6.5a3 3 0 0 1 6 0V9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>Karta ma'lumotlari bizda saqlanmaydi</p>
</aside>
</form>Tokenlar: --fx-bg-muted --fx-bg-page --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-sm --fx-ease-standard --fx-fg-success --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
KalendarOy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi.Captcha ramkasi«Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / !Rang tanlagiçErkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa).ComboboxYozib qidiriladigan tanlov: köp variant (şahar, mijoz, mahsulot).Yoziş paneli (composer)AI çat va messenjer uçun BITTA yoziş paneli: biriktiriş tugmasi, avto-ösuvçi maydon, ixtiyoriy emoji, matn bölmasa mikrofon — matn paydo bölsa yuboriş (ikon animatsiyali almaşadi), oqim ketayotganda «Töxtatiş».Promo-kodPromo-kod yoki kupon: kod kiritiladi → «Qöllaş» → tekşiruv (tugmada yuklaniş) → qöllangan chip (✓ kod, çegirma summasi, × olib taşlaş) yoki xato matni.