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.

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/label/label.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/input/input.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<label class="fs-label" for="navn">Fullt navn</label>
<input class="fs-input" id="navn" type="text" />

<label class="fs-label" data-required="symbol" for="epost">E-postadresse</label>
<input class="fs-input" id="epost" type="email" required />

<label class="fs-label" data-required="text" for="telefon">Telefonnummer</label>
<input class="fs-input" id="telefon" type="tel" required />

<label class="fs-label" data-optional="" for="adresse">Adresse</label>
<input class="fs-input" id="adresse" type="text" />

<label class="fs-label" aria-disabled="true" for="orgnr">Organisasjonsnummer</label>
<input class="fs-input" id="orgnr" type="text" disabled />

TypeScript

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/label.css"
import "@fristil/designsystem/input.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"

<label {...fs.label()} htmlFor="navn">Fullt navn</label>
<input {...fs.input({ type: "text" })} id="navn" />

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>("#epost-label")
if (!ledetekst) throw new Error("fant ikke elementet")

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 input = document.querySelector<HTMLInputElement>("#epost")

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

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

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. Setter du begge, viser systemet bare den ene: det er det samme ::after, og byggefunksjonen dropper data-optional når feltet er påkrevd.

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

Ren HTML

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

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.