Label

Riktig typografi på <label>, og en fast måte å markere påkrevde og valgfrie felt på. Setter du opp et helt felt, er Field som regel enklere. Den setter for, id og aria-describedby for deg.

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/label.css"

Markering

Eksempel

Kode

<label class="fs-label" for="navn">Fullt navn</label>
<label class="fs-label" data-required="symbol" for="epost">E-postadresse</label>
<label class="fs-label" data-required="text" for="telefon">Telefonnummer</label>
<label class="fs-label" data-optional="" for="adresse">Adresse</label>
<label class="fs-label" aria-disabled="true" for="orgnr">Organisasjonsnummer</label>

Attributt	Effekt
(utelatt)	Vanlig ledetekst
data-required="symbol"	* i farefargen
data-required="text"	(påkrevd) i farefargen
data-optional=""	(valgfri) i dempet farge
aria-disabled="true"	Dempet tekstfarge

Velg én av data-required og data-optional og hold deg til den gjennom skjemaet. Markerer du begge, må brukeren lese begge for å vite hva som gjelder.

Sammen med et felt

for må matche id på feltet. Uten koblingen leses ikke ledeteksten opp når feltet får fokus, og et klikk på teksten flytter ikke fokus dit.

Eksempel

Kode

<label class="fs-label" data-required="symbol" for="epost">E-postadresse</label>
<input class="fs-input" id="epost" type="email" required aria-describedby="epost-hjelp" />
<p class="fs-help-text" id="epost-hjelp">Vi bruker adressen til å sende kvittering.</p>

TypeScript

import { fs } from "@fristil/designsystem"

const ledetekst = document.querySelector<HTMLLabelElement>("#epost-label")

fs.setAttributes(ledetekst, fs.label({ required: "symbol" }))
ledetekst.htmlFor = "epost"

for setter du selv. Funksjonen returnerer bare Fristils egne attributter.

Setter du opp et helt felt, gjør fs.field både markeringen og koblingen til kontrollen:

const felt = fs.field({ id: "epost", required: "symbol" })

fs.setAttributes(ledetekst, felt.label)
fs.setAttributes(input, { ...fs.input({ type: "email" }), ...felt.control })

Klasser du kan style

Klasse	Hva det er
.fs-label	Ledeteksten. Markeringene legges på med ::after.

Markeringen bak data-required og data-optional er tekst i ::after, så den kan byttes uten å endre markupen:

.fs-label[data-optional]::after {
  content: " (kan stå tomt)";
}

Se Tilpasning for hvordan laget virker.

Tilgjengelighet

• data-required er bare visuelt. Sett required på selve feltet, ellers vet ikke skjermleseren at det må fylles ut.
• Stjernen legges til med ::after og leses ikke opp. Det er meningen, for required formidler det samme, og en opplest «stjerne» ved hvert felt blir støy.
• Skjul aldri ledeteksten helt. Trenger du den visuelt borte, bruk .fs-sr-only fra sr-only.css framfor placeholder, som forsvinner så snart brukeren skriver.