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.
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.
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
tonull
(or call the ref withnull
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
tonull
(or call the ref withnull
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.
Token | Fallback |
---|---|
--ac-error-summary-bg | --a-surface-default |
--ac-error-summary-border | --a-border-danger |
--ac-error-summary-list-dot | --a-text-action |