Aloqa bölimi

1. root.fx-contactşart
2. info.fx-contact__infoixtiyoriy
3. head.fx-contact__headixtiyoriy
4. eyebrow.fx-contact__eyebrowixtiyoriy
5. title.fx-contact__titleixtiyoriy
6. text.fx-contact__textixtiyoriy
7. channels.fx-contact__channelsixtiyoriy
8. channel.fx-contact__channelixtiyoriy
9. icon.fx-contact__iconixtiyoriy
10. name.fx-contact__nameixtiyoriy
11. hint.fx-contact__hintixtiyoriy
12. value (tel:/mailto: havola).fx-contact__valueixtiyoriy
13. hours (dl).fx-contact__hoursixtiyoriy
14. form.fx-contact__formşart
15. wide (töliq kenglik maydon).fx-contact__wideixtiyoriy
16. actions.fx-contact__actionsixtiyoriy
17. privacy.fx-contact__privacyixtiyoriy
18. done (rahmat).fx-contact__doneixtiyoriy
19. done-mark.fx-contact__done-markixtiyoriy
20. done-title.fx-contact__done-titleixtiyoriy
21. done-text.fx-contact__done-textixtiyoriy
22. offices.fx-contact__officesixtiyoriy
23. office.fx-contact__officeixtiyoriy

Kanallar — röyxat, har biri h3 nomli; ikonlar aria-hidden. Forma <form aria-labelledby>, har maydon <label> içida, majburiylari required + data-required belgisi (söz bilan ham). Yuborilgaç .fx-contact__done role="status" tabindex="-1" ga fokus ötkaziladi — ekran öquvçi rahmat xabarini öqiydi. Iş vaqti — <dl>.

Naqş: WAI-ARIA APG landmarks · rol form

npx foxui add contact

<section class="fx-contact" aria-labelledby="ct-t">
  <div class="fx-contact__info">
    <header class="fx-contact__head"><p class="fx-contact__eyebrow">Aloqa</p><h2 class="fx-contact__title" id="ct-t">Savol, taklif yoki hamkorlik?</h2><p class="fx-contact__text">Bir iş kunida javob beramiz. Şoşilinç bölsa — qönğiroq qiling.</p></header>
    <ul class="fx-contact__channels">
      <li class="fx-contact__channel"><span class="fx-contact__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg></span><h3 class="fx-contact__name">Telefon</h3><p class="fx-contact__hint">Du–Ju, 9:00–18:00</p><a class="fx-contact__value" href="tel:+998712005040">+998 71 200 50 40</a></li>
      <li class="fx-contact__channel"><span class="fx-contact__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><h3 class="fx-contact__name">Email</h3><p class="fx-contact__hint">Litsenziya va hisob-faktura savollari</p><a class="fx-contact__value" href="mailto:[email protected]">[email protected]</a></li>
      <li class="fx-contact__channel"><span class="fx-contact__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 4 3 11l6 2 2 6 3-4 5 4z"/></svg></span><h3 class="fx-contact__name">Telegram</h3><p class="fx-contact__hint">Tez savollar uçun</p><a class="fx-contact__value" href="https://t.me/" rel="noopener">@foxui_yordam</a></li>
      <li class="fx-contact__channel"><span class="fx-contact__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg></span><h3 class="fx-contact__name">Ofis</h3><p class="fx-contact__hint">Oldindan kelişib keling</p><a class="fx-contact__value" href="#">Toşkent, Mirzo Ulugʻbek tumani, Buyuk Ipak Yöli 45</a></li>
    </ul>
    <dl class="fx-contact__hours"><dt>Duşanba–Juma</dt><dd>9:00–18:00</dd><dt>Şanba</dt><dd>10:00–14:00</dd><dt>Yakşanba</dt><dd>Dam oliş</dd></dl>
  </div>
  <form class="fx-contact__form" aria-labelledby="ct-f" novalidate>
    <h3 class="fx-contact__name fx-contact__wide" id="ct-f">Ariza qoldiring</h3>
    <label class="fx-field"><span class="fx-label" data-required>Ism</span><input class="fx-input" name="ism" autocomplete="name" required placeholder="Aziz Karimov"></label>
    <label class="fx-field"><span class="fx-label" data-required>Telefon</span><span class="fx-input-group"><span class="fx-input-group__addon">+998</span><input class="fx-input-group__control" name="telefon" inputmode="tel" autocomplete="tel-national" required placeholder="90 123 45 67"></span></label>
    <label class="fx-field fx-contact__wide"><span class="fx-label">Kompaniya</span><input class="fx-input" name="kompaniya" autocomplete="organization" placeholder="«Ipak Yöli Savdo» MChJ"></label>
    <label class="fx-field fx-contact__wide"><span class="fx-label">Mavzu</span><span class="fx-select-wrap"><select class="fx-select" name="mavzu"><option>Obuna va narxlar</option><option>Jamoa litsenziyasi</option><option>Komponent sörovi</option><option>Hamkorlik</option></select></span></label>
    <label class="fx-field fx-contact__wide"><span class="fx-label" data-required>Xabar</span><textarea class="fx-textarea" name="xabar" rows="4" required placeholder="Qisqacha yozing: nima kerak, qachongacha"></textarea></label>
    <div class="fx-contact__actions"><p class="fx-contact__privacy">Yuboriş orqali <a href="#">maxfiylik siyosati</a>ga rozilik bildirasiz.</p><button class="fx-btn" data-variant="primary" type="submit">Yuboriş</button></div>
    <div class="fx-contact__done" role="status" tabindex="-1" hidden><span class="fx-contact__done-mark" aria-hidden="true">✓</span><p class="fx-contact__done-title">Rahmat, arizangiz qabul qilindi</p><p class="fx-contact__done-text">Menejerimiz bir iş kunida +998 raqamingizga qönğiroq qiladi.</p></div>
  </form>
  <ul class="fx-contact__offices" aria-label="Filiallar">
    <li class="fx-contact__office"><strong>Toşkent</strong><span>Buyuk Ipak Yöli 45, 3-qavat</span><span>+998 71 200 50 40</span></li>
    <li class="fx-contact__office"><strong>Samarqand</strong><span>Registon köçasi 12</span><span>+998 66 233 10 20</span></li>
    <li class="fx-contact__office"><strong>Farğona</strong><span>Mustaqillik köçasi 8</span><span>+998 73 244 30 50</span></li>
  </ul>
</section>

Tokenlar: --fx-bg-subtle --fx-bg-success-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-dialog-width --fx-ease-enter --fx-fg-success --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-sm --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-line-height-tight --fx-motion-base --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-shadow-sm --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 --fx-text-tertiary