Intro
ErrorSummary gir bruker en oppsummert liste med valideringsfeil de må løse før de fortsetter.
Egnet til:
- Å gi bruker oversikt over hva som må rettes på før de fortsetter
Uegnet til:
- Erstatning for fortløpende validering på siden med error state
Eksempler
Retningslinjer
- ErrorSummary skal vises øverst på siden. Dette er for å sikre at alle får med seg at det er feil eller mangler skjemaet eller søknaden.
- Det er viktig at feltet får fokus for å sikre tilgjengelighet.
- Feilmeldingene i oppsummeringen skal være ordlagt likt som feilmeldingen ved feltet.
- Feilmeldingen i oppsummeringen skal lenke direkte til feltet med feilen.
- Hvis feilen gjelder flere felter må du lenke til den første tilfellet av feilen.
Tilgjengelighet
Flytting av fokus til ErrorSummary
Ved å flytte fokuset til ErrorSummary får tastaturbrukere og skjermlesere lettere tilgang til feilmeldingene uten å selv måtte lete seg frem til dem. Dette kan gjøres i kode på flere måter, men de vanligste vil være eksemplene under.
Props
ErrorSummary
- children ReactNode
- Collectipn of ErrorSummary.Item
- size?"medium" | "small"
- Changes padding and font-sizes
- heading? ReactNode
- Heading above links
- headingTag?ElementType<any>
- Allows setting a different HTML h-tag
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- ErrorSummary extends HTMLDivElement
ErrorSummary.Item
- children ReactNode
- Link text
- href? string
- Link to errormessage
- className? string
- ref? Ref<HTMLAnchorElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- ErrorSummary.Item extends HTMLAnchorElement
Tokens
Token | Fallback |
---|---|
--ac-error-summary-bg | --a-surface-default |
--ac-error-summary-border | --a-border-danger |
--ac-error-summary-list-dot | --a-text-action |