Error summary

Unable to parse html

const Preview = () => {
  return (
    <ErrorSummary>
      <ErrorSummary.Heading>
        For å gå videre må du rette opp følgende feil:
      </ErrorSummary.Heading>
      <ErrorSummary.List>
        <ErrorSummary.Item>
          <ErrorSummary.Link href='#'>
            Fødselsdato kan ikke være etter år 2005
          </ErrorSummary.Link>
        </ErrorSummary.Item>
        <ErrorSummary.Item>
          <ErrorSummary.Link href='#'>
            Telefonnummer kan kun inneholde siffer
          </ErrorSummary.Link>
        </ErrorSummary.Item>
        <ErrorSummary.Item>
          <ErrorSummary.Link href='#'>E-post må være gyldig</ErrorSummary.Link>
        </ErrorSummary.Item>
      </ErrorSummary.List>
    </ErrorSummary>
  );
};

render(<Preview />)

Bruk error summary når

• du skal vise en tydelig oversikt over hvilke feil som må rettes før de kan sende inn et skjema
• et skjema har mange felt, der det kan være vanskelig å få oversikt over hvor feilene befinner seg

Unngå error summary når

• tilbakemeldingene ikke hindrer innsending, for eksempel advarsler eller anbefalinger
• du skal vise systemvarsler, bruk alert

Eksempel

Bruk i skjema

I eksempelet under kan du trykke på hver lenke i error summary for å navigere til det aktuelle feltet med feil.

Unable to parse html

const WithForm = () => {
  return (
    <>
      <Textfield
        label='Fornavn'
        id='fornavn'
        error='Fornavn må være minst 2 tegn'
      />

      <Textfield
        label='Telefon'
        id='telefon'
        type='tel'
        error='Telefonnummer kan kun inneholde siffer'
      />

      <ErrorSummary>
        <ErrorSummary.Heading>
          For å gå videre må du rette opp følgende feil:
        </ErrorSummary.Heading>
        <ErrorSummary.List>
          <ErrorSummary.Item>
            <ErrorSummary.Link href='#fornavn'>
              Fornavn må være minst 2 tegn
            </ErrorSummary.Link>
          </ErrorSummary.Item>
          <ErrorSummary.Item>
            <ErrorSummary.Link href='#telefon'>
              Telefonnummer kan kun inneholde siffer
            </ErrorSummary.Link>
          </ErrorSummary.Item>
        </ErrorSummary.List>
      </ErrorSummary>
    </>
  );
};

render(<WithForm />)

Retningslinjer

Error summary brukes til å vise en oppsummering når det er feil eller mangler i noe brukeren har gjort. En oppsummering kan gjelde for én eller flere feil. Error summary skal inneholde alle feilmeldingene som er på siden, så brukerne kan navigere direkte til feilene og manglene ved å klikke på lenkene i oppsummeringen.

Plassering

Vi anbefaler å vise error summary like over Neste/Send inn-knappen. Dette for at brukerne skal forstå sammenhengen mellom feilen og hvorfor de blir hindret i å gå videre.

I noen tilfeller kan det likevel være bedre å vise oppsummeringen i toppen, det kan du lese mer om i artikkelen om feilmeldinger.

Synlighet

Oppsummeringen skal ikke være synlig uten at brukeren foretar seg noe. Den skal bli synlig først når brukeren har utført en handling som utløser feil. Oppsummeringen får automatisk fokus når den vises, og når innholdet endres.

• Hvis vi validerer fortløpende (for eksempel ved onBlur på hvert felt), venter vi med å vise error summary til brukeren prøver å sende inn skjemaet.
• Feilmeldingene skal lenke direkte til feltet det gjelder.
• Hvis feilen gjelder flere felt, for eksempel når to felt valideres på tvers, lenker vi til det første tilfellet av feilen.

Tekst

Pass på at overskriften “For å gå videre må du rette opp følgende feil” brukes i error summary. Feilmeldingene i oppsummeringen skal være formulert lik feilmeldingen ved feltet.