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
Eksempler
Sett fokus på ErrorSummary ved submit. Hvis du gjør en ny sidelasting kan du også sette en ID på ErrorSummary og referere til den i URLens hash.
Retningslinjer
- Hvis dere gjør validering fortløpende (feks. ved onBlur på hvert felt), vent med å vise ErrorSummary til brukeren prøver å sende inn skjemaet (submit).
- Det er viktig at komponenten får fokus ved submit slik at brukeren får med seg at det er feil eller mangler i skjemaet. (Se eksempel)
(Fokus gjør at man skrolles til komponenten, samt at skjermleserbrukere får overskriften lest opp.) - Feilmeldingene i oppsummeringen skal være ordlagt likt som feilmeldingen ved feltet.
- Feilmeldingene skal lenke direkte til feltet det gjelder. Det anbefalt at komponenten som har feil også får fokus når bruker klikker lenken til den. 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.
Relevante lenker
Props
ErrorSummary
children
- Type:
ReactNode
- Description:
size?
- Type:
"medium" | "small"
- Default:"medium"
- Description:
heading?
- Type:
ReactNode
- 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
Token | Fallback |
---|---|
--ac-error-summary-bg | --a-surface-default |
--ac-error-summary-border | --a-border-danger |
--ac-error-summary-list-dot | --a-text-action |