Radio

Ren CSS på et vanlig <input type="radio">. Knappene i en gruppe kobles sammen av name, og det er den koblingen som gjør at bare én kan være valgt, og at piltastene flytter mellom dem.

Kan brukeren velge flere, bruk Checkbox. Er alternativene mange, er Select kortere på skjermen.

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

En gruppe

Eksempel

Kode

<fieldset class="fs-fieldset">
<legend class="fs-legend" data-required="symbol">Hvordan vil du ha svaret?</legend>

<div class="fs-radio-row">
  <input class="fs-radio" type="radio" id="svar-digital" name="svar" value="digital" checked />
  <label class="fs-label" for="svar-digital">I digital postkasse</label>
</div>

<div class="fs-radio-row">
  <input class="fs-radio" type="radio" id="svar-post" name="svar" value="post" />
  <label class="fs-label" for="svar-post">Som brev i posten</label>
</div>

<div class="fs-radio-row">
  <input class="fs-radio" type="radio" id="svar-hentes" name="svar" value="hentes" disabled />
  <label class="fs-label" for="svar-hentes">Hentes på kontoret</label>
</div>
</fieldset>

Gruppen hører alltid hjemme i en Fieldset. Uten den leses bare alternativet opp, ikke spørsmålet det svarer på.

Tilstander

Eksempel

Kode

<div class="fs-radio-row">
<input class="fs-radio" type="radio" id="ugyldig" name="eksempel" data-state="invalid" aria-invalid="true" />
<label class="fs-label" for="ugyldig">Du må velge ett alternativ</label>
</div>

data-state	Brukes til
(utelatt)	Normaltilstand
invalid	Valideringen har feilet
success	Valget er bekreftet gyldig. Bruk sparsomt.

Feiler valideringen, sett tilstanden på alle knappene i gruppen. Det er gruppen som er ugyldig, ikke én av knappene.

TypeScript

import { fs } from "@fristil/designsystem"

const knapper = document.querySelectorAll<HTMLInputElement>("[name='svar']")

function marker(ugyldig: boolean) {
  for (const knapp of knapper) {
    fs.setAttributes(knapp, fs.radio({ state: ugyldig ? "invalid" : "default" }))
  }
}

name setter du selv, siden bare du vet hva gruppen heter. fs.radio.row gir klassen på raden rundt. Se Typesikker bruk.

Klasser du kan style

Klasse	Hva det er
.fs-radio	Selve knappen
.fs-radio-row	Raden som holder knappen og teksten ved siden av hverandre

Variabel	Standard
--fs-radio-size	var(--size-5)

Prikken er en gradient tegnet i --semantic-interactive-contrast, så den følger temaet uten et eget bilde. Se Tilpasning.

Tilgjengelighet

• Alle knappene i gruppen må dele name. Uten det blir hver knapp sin egen gruppe, og brukeren kan velge flere.
• Piltastene flytter mellom knappene og velger samtidig. Tab hopper ut av hele gruppen. Det er nettleserens egen oppførsel, og den skal ikke overstyres.
• Ikke forhåndsvelg et alternativ når valget har en konsekvens. Da blir standardverdien et svar brukeren aldri tok stilling til.
• Har du bare to alternativer som er hverandres motsetning, vurder Checkbox eller Switch i stedet.