ErrorSummary

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 ErrorSummary 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å ErrorSummary 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 ErrorSummary for å navigere til det aktuelle feltet med feil.

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

ErrorSummary 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. ErrorSummary 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 ErrorSummary 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.

• Hvis vi validerer fortløpende (for eksempel ved onBlur på hvert felt), venter vi med å vise ErrorSummary til brukeren prøver å sende inn skjemaet.
• Det er viktig at komponenten får fokus når den blir vist, slik at brukeren får med seg at det er feil eller mangler i 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 ErrorSummary. Feilmeldingene i oppsummeringen skal være formulert lik feilmeldingen ved feltet.