FormErrorSummary
Lista problemów po nieudanym wysłaniu, umieszczona na górze formularza. Używaj jej razem z błędami przy każdym polu, nigdy zamiast nich.
- FormErrorSummary
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: FormErrorSummary
There are 2 problems with this form
Enter a title
Enter an email address like name@example.com
Noc, podgląd: FormErrorSummary
There are 2 problems with this form
Enter a title
Enter an email address like name@example.com
Wysoki kontrast, podgląd: FormErrorSummary
There are 2 problems with this form
Enter a title
Enter an email address like name@example.com
UżycieLink do sekcji Użycie
import { FormErrorSummary } from '@skribly/ui/forms'<FormErrorSummary
title="There are 2 problems with this form"
errors={[{ fieldId: 'title', message: 'Enter a title' }]}
/>Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Jest komunikatem typu assertive i przejmuje fokus, gdy się pojawi, więc użytkownicy klawiatury i czytników ekranu trafiają na nią po wysłaniu.
- Każda pozycja jest linkiem, który przenosi fokus do swojego pola i przewija je do widoku.
- Poziom nagłówka jest propem, aby pasował do struktury strony.
- Przykład ma wyłączone autoFocus, aby galeria nie skakała.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.