ValidationMessage

const Preview = () => {
  return <ValidationMessage>Dette er en valideringsmelding.</ValidationMessage>;
};

render(<Preview />)

ValidationMessage er en typografi-komponent som brukes til å vise korte, tydelige meldinger som hjelper brukeren å forstå statusen til et skjemafelt. Bruk den for å vise feil, advarsler, suksessmeldinger eller informasjon. Valideringsmeldinger er utformet for å være lett synlige, samtidig som de passer naturlig inn i skjemaoppsettet.

Eksempel

Alle farger

const AllColors = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <ValidationMessage data-color='danger'>
        Dette er en feilmelding.
      </ValidationMessage>

      <ValidationMessage data-color='success'>
        Dette er en suksessmelding.
      </ValidationMessage>

      <ValidationMessage data-color='info'>
        Dette er en informasjonsmelding.
      </ValidationMessage>

      <ValidationMessage data-color='warning'>
        Dette er en advarsel.
      </ValidationMessage>
    </div>
  );
};

render(<AllColors />)

Retningslinjer

Bruk ValidationMessage for å gi umiddelbar og kontekstavhengig tilbakemelding. Meldinger skal plasseres nær feltet de gjelder, slik at både visuelle brukere og brukere av hjelpemidler enkelt forstår sammenhengen. Se artikkelen om brukerutløste feilemelinger for mer informasjon om god praksis ved bruk av valideringsmeldinger.

Tekst

Valideringsmeldinger skal være korte, konkrete og hjelpe brukeren videre. Les om hvordan du skriver gode feilmeldinger.