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.

Slik tar du den i bruk

Eksempel

Ren HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/error-text/error-text.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

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

TypeScript

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

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<p {...fs.errorText()}>Fyll inn navnet ditt.</p>

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

import { fs } from "@fristil/designsystem"

const input = document.querySelector<HTMLInputElement>("#epost")
const feilmelding = document.querySelector<HTMLElement>("#epost-feil")

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

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

Ren HTML

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

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.

Klasser du kan style

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

Se Tilpasning for hvordan laget virker.

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.