Kiritiş · molecule
Promo-kod
Promo-kod yoki kupon: kod kiritiladi → «Qöllaş» → tekşiruv (tugmada yuklaniş) → qöllangan chip (✓ kod, çegirma summasi, × olib taşlaş) yoki xato matni. Forma içida turadi (içki <form> yöq). Yiğilgan variant — «Promo-kodingiz bormi?» havolasi ostida.
Bitta buyurtmaga bitta promo-kod.
Promo-kodingiz bormi?
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | loading Tekşirilmoqda (xulq qöyadi)applied Qöllandi — chiperror Xato matni + silkiniş | — |
Anatomiya
- root
.fx-couponşart - form
.fx-coupon__formşart - input
.fx-coupon__inputşart - message
.fx-coupon__msgixtiyoriy - applied
.fx-coupon__appliedixtiyoriy - code
.fx-coupon__codeixtiyoriy - value
.fx-coupon__valueixtiyoriy - remove
.fx-coupon__removeixtiyoriy - toggle
.fx-coupon__toggleixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter (maydonda) | Kodni qöllaydi (taşqi formani yubormaydi) |
| Enter / Space (×) | Qöllangan kodni olib taşlaydi, fokus maydonga |
Xabar matni aria-live=polite va maydonning aria-describedby'ida; xatoda aria-invalid=true. Tekşiruv paytida tugma aria-busy. Qöllangaç fokus chipdagi «×» tugmaga ötadi (aria-label «Promo-kodni olib taşlaş: KUZ30»), olib taşlangaç maydonga qaytadi.
Kod
AI uçun: qaçon işlatiladi
- Checkout, tarif tanlaş, buyurtma xulosasida çegirma kodini qöllaş.
- Sovğa sertifikati yoki taklif kodini kiritiş.
- Bir martalik SMS/email tasdiq kodi →
otp - Oddiy matn maydoni (tekşiruvsiz) →
input - Xato kodni faqat qizil çegara bilan bildirmang — sababini yozing («muddati tugagan», «faqat 500 000 sömdan»).
- Promo-kod maydonini tölov sahifasining eng közga köringan joyiga qöymang — yiğilgan variant xaridni çalğitmaydi.
- Qöllangan çegirmani faqat chipda qoldirmang — buyurtma xulosasida ham alohida qator bölsin.
npx foxui add coupon
<div class="fx-coupon" data-fx-coupon data-codes='{"KUZ30":{"value":"−385 200 söm"},"YANGI10":{"value":"−10 %"}}' style="max-inline-size:24rem">
<label class="fx-label" for="cp1">Promo-kod</label>
<div class="fx-coupon__form"><input class="fx-input fx-coupon__input" id="cp1" name="promo" placeholder="Masalan, KUZ30"><button class="fx-btn" data-coupon-apply>Qöllaş</button></div>
<p class="fx-coupon__msg">Bitta buyurtmaga bitta promo-kod.</p>
</div>
<details class="fx-coupon" data-fx-coupon data-codes='{"KUZ30":{"value":"−385 200 söm"}}' style="max-inline-size:24rem">
<summary class="fx-coupon__toggle">Promo-kodingiz bormi?</summary>
<div class="fx-coupon__form"><input class="fx-input fx-coupon__input" data-size="sm" name="promo2" aria-label="Promo-kod"><button class="fx-btn" data-size="sm" data-coupon-apply>Qöllaş</button></div>
</details>Tokenlar: --fx-bg-muted --fx-bg-pressed --fx-bg-success-subtle --fx-border-color-error --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-fg-success --fx-font-adjust-mono --fx-font-adjust-sans --fx-font-family-mono --fx-font-family-sans --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-slow --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-error --fx-text-primary --fx-text-secondary --fx-text-tertiary