Aksel

Meny

Komponenter / Core

ErrorSummary

Oppdatert Stabil
GithubYarn FigmaEndringslogg

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

Har du innspill til komponenten?

Send forslag

Eksempler

Åpne eksempel i nytt vindu

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

TokenFallback
--ac-error-summary-bg--a-surface-default
--ac-error-summary-border--a-border-danger
--ac-error-summary-list-dot--a-text-action
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 eller utforsk alle design tokens.