Onboarding oqimi

1. root (form.fx-wizard).fx-onboardingşart
2. aside.fx-onboarding__asideixtiyoriy
3. brand.fx-onboarding__brandixtiyoriy
4. help.fx-onboarding__helpixtiyoriy
5. main.fx-onboarding__mainşart
6. eyebrow.fx-onboarding__eyebrowixtiyoriy
7. options.fx-onboarding__optionsixtiyoriy
8. option.fx-onboarding__optionixtiyoriy
9. option-icon.fx-onboarding__option-iconixtiyoriy
10. option-title.fx-onboarding__option-titleixtiyoriy
11. option-text.fx-onboarding__option-textixtiyoriy
12. art (yakun belgisi).fx-onboarding__artixtiyoriy

Forma aria-label bilan; qadamlar — fx-steps (aria-current="step", bajarilgan/xato holati söz bilan). Qadam almaşganda fokus panel sarlavhasiga ötadi (wizard). Tanlov kartalari — fieldset + legend içida radio, ← → bilan tanlanadi, fokus halqasi kartada. Animatsiyalar prefers-reduced-motion'da öçadi.

Naqş: WAI-ARIA APG radio · rol form

npx foxui add onboarding

<form class="fx-wizard fx-onboarding" data-fx-wizard action="#" aria-label="Iş maydonini sozlaş">
  <aside class="fx-onboarding__aside">
    <div class="fx-bg" data-pattern="dots" data-fade="bottom" aria-hidden="true"></div>
    <p class="fx-onboarding__brand"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="6" fill="currentColor"/></svg>Çorsu CRM</p>
    <ol class="fx-steps" data-orientation="vertical" aria-label="Sozlaş bosqiçlari">
      <li class="fx-steps__item" aria-current="step"><span class="fx-steps__text"><span class="fx-steps__label">Xuş kelibsiz</span><span class="fx-steps__desc">Siz kimsiz?</span></span></li>
      <li class="fx-steps__item"><span class="fx-steps__text"><span class="fx-steps__label">Profil</span><span class="fx-steps__desc">Ism va kompaniya</span></span></li>
      <li class="fx-steps__item"><span class="fx-steps__text"><span class="fx-steps__label">Jamoa</span><span class="fx-steps__desc">Hamkasblarni taklif qiling</span></span></li>
      <li class="fx-steps__item"><span class="fx-steps__text"><span class="fx-steps__label">Tayyor</span><span class="fx-steps__desc">Iş maydoniga ötiş</span></span></li>
    </ol>
    <p class="fx-onboarding__help">Yordam kerakmi? <a class="fx-link" href="#">Telegram orqali yozing</a></p>
  </aside>
  <div class="fx-onboarding__main">
    <section class="fx-wizard__panel">
      <p class="fx-onboarding__eyebrow">Xuş kelibsiz</p>
      <h2 class="fx-wizard__title">Siz qaysi vazifada işlaysiz?</h2>
      <p class="fx-wizard__text">Javobingizga qarab boş sahifani moslaymiz. Keyin sozlamalardan özgartiriş mumkin.</p>
      <fieldset class="fx-onboarding__options"><legend class="fx-sr-only">Vazifangiz</legend><label class="fx-onboarding__option"><input type="radio" name="ob-rol" value="dizayner" checked required><span class="fx-onboarding__option-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></span><span class="fx-onboarding__option-title">Dizayner</span><span class="fx-onboarding__option-text">Mavzu va uslub bilan işlayman</span></label><label class="fx-onboarding__option"><input type="radio" name="ob-rol" value="dasturchi" required><span class="fx-onboarding__option-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6l-6 6 6 6M16 6l6 6-6 6"/></svg></span><span class="fx-onboarding__option-title">Dasturçi</span><span class="fx-onboarding__option-text">Komponentlarni kodga ulayman</span></label><label class="fx-onboarding__option"><input type="radio" name="ob-rol" value="rahbar" required><span class="fx-onboarding__option-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6"/></svg></span><span class="fx-onboarding__option-title">Rahbar</span><span class="fx-onboarding__option-text">Jamoa va litsenziyalarni boşqaraman</span></label></fieldset>
    </section>
    <section class="fx-wizard__panel" hidden>
      <p class="fx-onboarding__eyebrow">Profil</p>
      <h2 class="fx-wizard__title">Özingiz haqingizda</h2>
      <div class="fx-field"><label class="fx-label" for="ob-ism" data-required>Ism</label><input class="fx-input" id="ob-ism" required autocomplete="name" placeholder="Dilnoza Qodirova"></div>
      <div class="fx-field"><label class="fx-label" for="ob-kom">Kompaniya</label><input class="fx-input" id="ob-kom" autocomplete="organization" placeholder="Çorsu Market"></div>
    </section>
    <section class="fx-wizard__panel" hidden>
      <p class="fx-onboarding__eyebrow">Jamoa</p>
      <h2 class="fx-wizard__title">Hamkasblaringizni taklif qiling</h2>
      <p class="fx-wizard__text">Har qatorga bitta email. Bu qadamni ötkazib yuborişingiz mumkin.</p>
      <div class="fx-field"><label class="fx-label" for="ob-email">Email manzillar</label><textarea class="fx-textarea" id="ob-email" placeholder="[email protected]&#10;[email protected]"></textarea></div>
    </section>
    <section class="fx-wizard__panel" hidden>
      <span class="fx-onboarding__art" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
      <h2 class="fx-wizard__title">Hammasi tayyor!</h2>
      <p class="fx-wizard__text">Iş maydoningiz sozlandi. Birinçi arizani qöşib köring — 2 daqiqa vaqt oladi.</p>
    </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" data-variant="primary" type="button" data-wizard="next">Davom etiş</button>
      <button class="fx-btn" data-variant="primary" type="submit" data-wizard="submit">Iş maydoniga ötiş</button>
    </div>
  </div>
</form>

Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-subtle --fx-bg-success-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-dialog-width --fx-ease-bounce --fx-ease-enter --fx-ease-standard --fx-fg-success --fx-font-adjust-display --fx-font-family-display --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-knob-motion --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-shift-lg --fx-motion-slow --fx-motion-slower --fx-popover-width --fx-radius-circle --fx-radius-control --fx-radius-overlay --fx-radius-surface --fx-shadow-lg --fx-size-avatar-lg --fx-size-control-sm --fx-size-icon-lg --fx-size-icon-md --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary