Holat va javob · molecule
Xatolar xulosasi
Forma tepasida: «Quyidagilarni tuzating» sarlavhasi va har xatoga havola. Yuborişda fokus şu blokka ketadi, havola bosilsa tegişli maydonga fokus beriladi. Maydon ostidagi xato matni bilan birga işlaydi, uni almaştirmaydi.
Quyidagilarni tuzating
Ismni yozing.
Anatomiya
- root
.fx-errorsşart - title
.fx-errors__titleşart - list
.fx-errors__listşart
Holatlar
hiddenfocus
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Xato havolalari orasida |
| Enter | Havola — tegişli maydonga fokus |
role="alert" va tabindex="-1": yuborişda fokus blokka ketadi, ekran öquvçi sarlavhani öqiydi. Havola maydonning öziga (label emas) fokus beradi; har havola maydon id'siga işora qiladi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Forma yuborilganda bir neçta maydonda xato çiqqan.
npx foxui add error-summary
<div class="fx-errors" data-fx-errsummary role="alert" tabindex="-1" aria-labelledby="xx-t">
<h2 class="fx-errors__title" id="xx-t">Quyidagilarni tuzating</h2>
<ul class="fx-errors__list">
<li><a href="#xx-ism">Ismni yozing</a></li>
<li><a href="#xx-tel">Telefon raqami 9 ta raqamdan iborat bölsin</a></li>
</ul>
</div>
<div class="fx-field" data-invalid>
<label class="fx-label" for="xx-ism">Ism</label>
<input class="fx-input" id="xx-ism" aria-invalid="true" aria-describedby="xx-ism-h">
<span class="fx-hint" id="xx-ism-h">Ismni yozing.</span>
</div>Tokenlar: --fx-bg-error-subtle --fx-border-color-focus --fx-border-width-focus --fx-fg-error --fx-font-size-sm --fx-font-weight-medium --fx-font-weight-semibold --fx-radius-control --fx-radius-surface --fx-size-status-dot --fx-space-1 --fx-space-2 --fx-space-4 --fx-space-5 --fx-text-primary
Şu toifadan
OgohlantirişBölim yoki sahifadagi muhim xabar: töla tusli yuza, holat belgisi (şakl), sarlavha, matn, bitta havola, ixtiyoriy yopiş.Tasdiqlaş sörovi (ruxsat / rad)Agent xavfli yoki qaytarib bölmaydigan amaldan oldin ruxsat söraydi: savol, nima özgarişi (tafsilot) va Ruxsat beriş / Rad etiş / Har doim ruxsat.BannerButun kenglikdagi sayt e'loni (texnik işlar, obuna tugadi): holat belgisi (şakl), qisqa matn, bitta havola, yopiş.Portlaş va konfettiYoqtiriş va muvaffaqiyat uçun qisqa, bir martalik quvonç effektlari (Magic UI Confetti, Twitter «yoqdi»).Boşlaş röyxatiYangi foydalanuvçi uçun onboarding kartasi: jarayon çiziği va «2 / 5», qadamlar röyxati.Cookie roziligiCookie va kuzatuv roziligi naqşi (4.180, GOV.UK Cookie banner; GDPR 2-bosqiç uçun): pastki karta — nima uçun cookie kerakligi bir-ikki gapda, «Qabul qiliş», «Rad etiş» (bir xil vaznli — rad etiş yaşirilmaydi) va «Sozlaş».