Aksel

Meny

ErrorSummary

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

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.

Egnet til:

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

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

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:

size?

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

heading?

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

headingTag?

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

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ErrorSummary.Item

children

  • Type:
    ReactNode
  • Description:

href?

  • Type:
    string
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLAnchorElement>
  • Description:

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.