Help Text

Den lille teksten under et felt som forklarer hva systemet forventer. Er teksten en feilmelding, bruk Error Text.

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

Varianter

Eksempel

Kode

<p class="fs-help-text">Du finner nummeret øverst til høyre på fakturaen.</p>
<p class="fs-help-text" data-variant="default">Endringen gjelder fra neste månedsskifte.</p>
<p class="fs-help-text" data-variant="success">Vedlegget er lastet opp.</p>
<p class="fs-help-text" data-variant="warning">Søknadsfristen går ut om tre dager.</p>

data-variant	Brukes til
(utelatt)	Dempet. Standardvalget.
default	Full tekstfarge, når teksten må leses før feltet fylles ut
success	Bekreftelse på at noe gikk bra
warning	Noe brukeren bør vite, men som ikke stopper innsending

Koblet til feltet

Uten aria-describedby leses ikke hjelpeteksten opp når feltet får fokus.

Eksempel

Kode

<label class="fs-label" for="kid">KID-nummer</label>
<input class="fs-input" id="kid" inputmode="numeric" aria-describedby="kid-hjelp" />
<p class="fs-help-text" id="kid-hjelp">Du finner nummeret øverst på fakturaen.</p>

Field genererer id-en og setter aria-describedby for deg.

TypeScript

import { fs } from "@fristil/designsystem"

const felt = fs.field({ id: "kid", help: true })

fs.setAttributes(ledetekst, felt.label)
fs.setAttributes(input, { ...fs.input(), ...felt.control })
fs.setAttributes(hjelpetekst, { ...fs.helpText(), ...felt.help })

fs.field genererer id-en og setter aria-describedby, så koblingen ikke kan glemmes.

Trenger du bare klassen:

fs.setAttributes(hjelpetekst, fs.helpText({ variant: "warning" }))

Klasser du kan style

Klasse	Hva det er
.fs-help-text	Teksten. Fargen kommer fra data-variant.

Se Tilpasning for hvordan laget virker.

Tilgjengelighet

• Uten aria-describedby er teksten usynlig for skjermlesere. Koblingen er hele poenget.
• Hold den kort. Den leses opp rett etter ledeteksten hver gang feltet får fokus.
• Fargen skal ikke bære betydningen. En warning må si i ordene sine hva problemet er.