Navigatsiya · pattern
Köp bosqiçli forma
Murakkab formani qadamlarga böladi: Qadamlar, joriy panel, Orqaga/Keyingi/Yuboriş. «Keyingi» joriy qadamni tekşiradi (xato bölsa töxtaydi, qadam «xato» belgisini oladi), qadam almaşganda fokus sarlavhaga ketadi. Oxirgi panel — javoblar xulosasi, har qatorda «Özgartiriş».
Anatomiya
- root
.fx-wizardşart - panel
.fx-wizard__panelşart - title
.fx-wizard__titleşart - text
.fx-wizard__textixtiyoriy - footer
.fx-wizard__footerşart - status
.fx-wizard__statusixtiyoriy - review
.fx-wizard__reviewixtiyoriy - edit
.fx-wizard__editixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Panel içidagi maydonlar va tugmalar |
| Enter (maydonda) | Keyingi qadamga (oxirgisida — yuboradi) |
Qadamlar <ol> + aria-label, joriy qadam aria-current="step", bajarilgani/xatosi sr-only söz bilan. Qadam almaşganda fokus panel sarlavhasiga (tabindex=-1). Enter oxirgi qadamdan oldin formani yubormaydi — «Keyingi»ga ötadi. Xato — brauzerning native xabari + qadamda «xato bor».
Kod
AI uçun: qaçon işlatiladi
- Forma uzun yoki mantiqan bosqiçli (buyurtma, röyxatdan ötiş, sozlaş).
npx foxui add wizard
<form class="fx-wizard" data-fx-wizard action="#">
<ol class="fx-steps" aria-label="Buyurtma beriş">
<li class="fx-steps__item" aria-current="step"><span class="fx-steps__label">Mijoz</span></li>
<li class="fx-steps__item"><span class="fx-steps__label">Tarif</span></li>
<li class="fx-steps__item"><span class="fx-steps__label">Tasdiq</span></li>
</ol>
<section class="fx-wizard__panel">
<h2 class="fx-wizard__title">Mijoz ma'lumotlari</h2>
<div class="fx-field"><label class="fx-label" for="wz-ism" data-required>Ism</label><input class="fx-input" id="wz-ism" required placeholder="Aziz Karimov"></div>
<div class="fx-field"><label class="fx-label" for="wz-tel" data-required>Telefon</label><input class="fx-input" id="wz-tel" type="tel" required placeholder="90 123 45 67"></div>
</section>
<section class="fx-wizard__panel" hidden>
<h2 class="fx-wizard__title">Tarifni tanlang</h2>
<div class="fx-field"><label class="fx-label" for="wz-tarif">Tarif</label><select class="fx-select" id="wz-tarif"><option>Oylik — 99 000 söm</option><option>Yillik — 990 000 söm</option></select></div>
</section>
<section class="fx-wizard__panel" data-review hidden>
<h2 class="fx-wizard__title">Javoblarni tekşiring</h2>
<dl class="fx-dl fx-wizard__review" data-variant="divided"></dl>
</section>
<div class="fx-wizard__footer">
<button class="fx-btn" data-variant="ghost" type="button" data-wizard="prev">Orqaga</button>
<span class="fx-wizard__status" data-wizard-status></span>
<button class="fx-btn" type="button" data-wizard="next">Keyingi</button>
<button class="fx-btn" type="submit" data-wizard="submit">Buyurtma beriş</button>
</div>
</form>Tokenlar: --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-radius-control --fx-space-1 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary