Help Text

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

Slik tar du den i bruk

<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/help-text/help-text.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

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

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/help-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.helpText()}>Du finner nummeret øverst til høyre på fakturaen.</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 ledetekst = document.querySelector<HTMLLabelElement>("#kid-label")
const input = document.querySelector<HTMLInputElement>("#kid")
const hjelpetekst = document.querySelector<HTMLElement>("#kid-help")

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" }))

`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
Ren HTML

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

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.