Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

ErrorSummary

ErrorSummary gir brukeren en oversikt over valideringsfeil i skjemaet som de må løse før de kan fortsette. Komponenten inneholder lenker til feltene som må rettes.

StabilOppdatert 27. mai 2025
Github FigmaEndringslogg

Egnet til:

  • Å gi brukerne en oversikt over hva som må rettes før de kan fortsette

Eksempler

Retningslinjer

Bruk

Vis komponenten hvis det oppdages feil i skjemaet idet brukeren prøver å gå til neste steg/sende inn (ikke før).

Flytt fokus til komponenten hver gang brukeren prøver å gå til neste steg/sende inn, hvis det finnes feil. Da er det større sjanse for at brukeren får det med seg. Se eksempel. (Fokus gjør at man skrolles til komponenten, samt at skjermleserbrukere får overskriften lest opp.)

ErrorSummary trenger ikke brukes hvis det aldri er mer enn ett skjemafelt på siden. I så fall er det feltet som skal få fokus ved feil.

Innhold

  • List opp alle feil som hindrer brukeren i å fortsette.
  • Feilmeldingene i ErrorSummary skal være ordlagt likt som feilmeldingen ved feltet, og må si noe om hvilket felt det gjelder.
  • Hvis du validerer fortløpende, husk å holde ErrorSummary i synk med feilmeldingene i hvert enkelt felt.
  • Feilmeldingene skal lenke direkte til feltet det gjelder, på en slik måte at feltet får fokus. Dette løses i de fleste tilfeller automatisk ved bruk av kombinasjonen anchor-tag og id.
  • Hvis feilen gjelder flere felter lenker du til det første tilfellet av feilen.
  • Overskriften må si noe om at feilene må rettes før brukeren kan gå videre, f.eks. "Du må rette disse feilene før du kan fortsette".

Plassering

ErrorSummary skal som hovedregel ligge i nærheten av det som trigger den. Vi anbefaler derfor å legge den rett over neste/send-knappen.

Ved ny sidelasting

Sørg for at brukeren legger merke til ErrorSummary hvis den vises ved sidelasting. Dette kan oppnås ved å legge den høyt oppe på siden (rett før skjemaet), eller flytte fokus til komponenten etter at siden har lastet.

Lenker

Props

ErrorSummary

children

  • Type:
    ReactNode
  • Description:

    Collection of ErrorSummary.Item.

size?

  • Type:
    "medium" | "small"
  • Default:
    ""medium""
  • Description:

    Changes padding and font-sizes.

heading?

  • Type:
    ReactNode
  • Default:
    "Du må rette disse feilene før du kan fortsette:"
  • Description:

    Heading above links.

headingTag?

  • Type:
    ElementType<any, keyof IntrinsicElements>
  • Default:
    "h2"
  • Description:

    Allows setting a different HTML h-tag.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    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). React Docs

ErrorSummary.Item

children

  • Type:
    ReactNode
  • Description:

    Link text

href?

  • Type:
    string
  • Description:

    Link to errormessage

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLAnchorElement>
  • Description:

    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). React Docs

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

TokenFallback
--ac-error-summary-bg--a-surface-default
--ac-error-summary-border--a-border-danger
--ac-error-summary-list-dot--a-text-action