Aksel
Komponenter / Core

ErrorSummary

StabilOPPDATERT 15. desember 2022
GithubYarn FigmaEndringslogg

ErrorSummary gir bruker en liste med valideringsfeil på siden de er på.

Egnet til å:

  • Gi bruker oversikt over hva som må rettes på

Vurder noe annet:

  • Dersom det er fortløpende validering på siden burde error state i komponentene vurderes

Har du innspill til komponenten?

Send forslag
Kom i gang som designeraksel.nav.noInstalleraksel.nav.no

Eksempler

Åpne i nytt vindu

Bruk

  • 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.

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>
ErrorSummary extends HTMLDivElement

ErrorSummary.Item

children ReactNode
Link text
className? string
ref? Ref<HTMLAnchorElement>
ErrorSummary.Item extends HTMLAnchorElement

Tokens

TokenFallback
--ac-error-summary-bg--a-surface-default
--ac-error-summary-border--a-border-danger
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår for mer info.

Var denne artikkelen til hjelp?