Checkbox

Ren CSS på et vanlig <input type="checkbox">, så tastatur, FormData og nettleserens egen validering virker som før. Skal brukeren velge ett av flere alternativer, er Radio riktig. Er valget av eller på for en innstilling som slår inn med en gang, bruk Switch.

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

<div class="fs-checkbox-row">
<input class="fs-checkbox" type="checkbox" id="vilkar" />
<label class="fs-label" for="vilkar">Jeg godtar vilkårene</label>
</div>

<div class="fs-checkbox-row">
<input class="fs-checkbox" type="checkbox" id="nyhetsbrev" checked />
<label class="fs-label" for="nyhetsbrev">Send meg nyhetsbrev</label>
</div>

<div class="fs-checkbox-row">
<input class="fs-checkbox" type="checkbox" id="bekreft" data-state="invalid" aria-invalid="true" />
<label class="fs-label" for="bekreft">Jeg bekrefter at opplysningene stemmer</label>
</div>

<div class="fs-checkbox-row">
<input class="fs-checkbox" type="checkbox" id="arkivert" checked disabled />
<label class="fs-label" for="arkivert">Saken er arkivert</label>
</div>

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

<div className={fs.checkbox.row}>
  <input {...fs.checkbox()} id="vilkar" />
  <label {...fs.label()} htmlFor="vilkar">Jeg godtar vilkårene</label>
</div>

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, type FieldState } from "@fristil/designsystem"

const boks = document.querySelector<HTMLInputElement>("#bekreft")
if (!boks) throw new Error("fant ikke elementet")

boks.addEventListener("change", () => {
  const tilstand: FieldState = boks.checked ? "default" : "invalid"

  fs.setAttributes(boks, fs.checkbox({ state: tilstand }))
})

fs.checkbox() setter type for deg, så boksen ikke kan bli et tekstfelt med boksens stil. fs.checkbox.row gir klassen på raden rundt. Se Typesikker bruk.

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

data-state er farge. Skjermlesere trenger aria-invalid="true" i tillegg, eller Field, som setter begge.

Delvis avkrysset

«Velg alle» er verken på eller av når noen av valgene under er krysset av. Den tilstanden finnes bare som en egenskap i JavaScript, ikke som et HTML-attributt:

<div class="fs-checkbox-row">
  <input class="fs-checkbox" type="checkbox" id="alle" />
  <label class="fs-label" for="alle">Velg alle vedlegg</label>
</div>

<script type="module">
  const alle = document.getElementById("alle")
  const valg = document.querySelectorAll(".vedlegg")

  function oppdater() {
    const antall = [...valg].filter((boks) => boks.checked).length

    alle.checked = antall === valg.length
    alle.indeterminate = antall > 0 && antall < valg.length
  }

  for (const boks of valg) boks.addEventListener("change", oppdater)
</script>

Skjermlesere melder tilstanden som «delvis avkrysset» av seg selv. Du trenger ikke aria-checked="mixed" på et ekte <input>.

Flere valg som hører sammen

Hører boksene til samme spørsmål, samle dem i en Fieldset. Da leses spørsmålet opp før hvert valg.

Eksempel
Ren HTML

<fieldset class="fs-fieldset">
<legend class="fs-legend">Hvordan vil du varsles?</legend>

<div class="fs-checkbox-row">
  <input class="fs-checkbox" type="checkbox" id="varsel-epost" name="varsel" value="epost" checked />
  <label class="fs-label" for="varsel-epost">E-post</label>
</div>

<div class="fs-checkbox-row">
  <input class="fs-checkbox" type="checkbox" id="varsel-sms" name="varsel" value="sms" />
  <label class="fs-label" for="varsel-sms">SMS</label>
</div>
</fieldset>

Like name-verdier gir én nøkkel med flere verdier i FormData. Les dem med formData.getAll("varsel").

Klasser du kan style

Klasse	Hva det er
`.fs-checkbox`	Selve boksen
`.fs-checkbox-row`	Raden som holder boksen og teksten ved siden av hverandre

Variabel	Standard
`--fs-checkbox-size`	`var(--fs-spacing-5)`
`--fs-checkbox-radius`	`var(--fs-spacing-1)`

Haken og streken tegnes fra --fs-icon-check og --fs-icon-dash, som snur med temaet. Se Tilpasning.

Tilgjengelighet

Hver boks trenger en <label> med for. Uten den er klikkflaten bare selve boksen, og skjermleseren leser ingenting.
Teksten skal si hva som skjer når boksen er krysset av, ikke hva spørsmålet het. «Send meg nyhetsbrev», ikke «Nyhetsbrev».
Ikke send skjemaet eller naviger når en boks endres. Brukeren forventer å kunne krysse av flere før noe skjer.
Er avkryssing påkrevd, sett required på boksen. Da stopper nettleseren innsendingen selv.