Error Text

Meldingen som vises når et felt ikke kan sendes inn slik det står. Den hører rett under feltet, ikke øverst på siden. Skal teksten forklare hva feltet forventer før brukeren har gjort noe, bruk Help Text.

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/error-text.css"

Varianter

Eksempel

Kode

<p class="fs-error-text">Skriv en e-postadresse med krøllalfa, for eksempel ola&#64;eksempel.no.</p>
<p class="fs-error-text" data-variant="warning">Adressen finnes ikke i folkeregisteret. Sjekk at den stemmer.</p>

data-variant	Brukes til
(utelatt)	Feil som stopper innsending
warning	Noe ser rart ut, men brukeren får fortsette

Koblet til feltet

Tre ting må stemme samtidig: data-state for fargen, aria-invalid for skjermleseren, og aria-describedby for selve teksten.

Eksempel

Kode

<label class="fs-label" for="epost">E-postadresse</label>
<input
class="fs-input"
id="epost"
type="email"
data-state="invalid"
aria-invalid="true"
aria-describedby="epost-feil"
value="ola&#64;"
/>
<p class="fs-error-text" id="epost-feil">Skriv en e-postadresse med krøllalfa.</p>

Field setter alle tre når du gir den invalid. Det er grunnen til at den komponenten finnes.

TypeScript

import { fs } from "@fristil/designsystem"

function oppdater(erGyldig: boolean) {
  const felt = fs.field({ id: "epost", error: true, invalid: !erGyldig })

  fs.setAttributes(input, { ...fs.input({ type: "email" }), ...felt.control })
  fs.setAttributes(feilmelding, { ...fs.errorText(), ...felt.error })
}

fs.field setter alle tre tingene som må stemme: data-state, aria-invalid og aria-describedby. felt.error inneholder hidden når feltet er gyldig, og feilmeldingen tas da heller ikke med i aria-describedby, siden en skjult melding ikke skal pekes på.

Klasser du kan style

Klasse	Hva det er
.fs-error-text	Meldingen. Fargen kommer fra data-variant.

Se Tilpasning for hvordan laget virker.

Ordlyd i meldingen

• Si hva brukeren skal gjøre, ikke hva systemet mislikte. «Skriv dato som DD-MM-ÅÅÅÅ» hjelper der «Ugyldig verdi» ikke gjør det.
• Ta med et eksempel når formatet er uvanlig.
• Ikke legg skylden på brukeren, og dropp utropstegnet.

Tilgjengelighet

• Vis feilen når brukeren har forlatt feltet, ikke mens han skriver.
• Dukker meldingen opp mens siden ellers står stille, legg role="alert" på elementet.
• Sendes et skjema inn med flere feil, flytt fokus til det første som feilet.
• Fjern aldri meldingen uten å fjerne aria-invalid samtidig.