Switch

En avkryssingsboks med role="switch". Skjermlesere sier da «på» og «av» framfor «avkrysset», mens tastaturet og FormData virker som for en vanlig boks.

Velg Switch når innstillingen trer i kraft med det samme. Skal valget først gjelde når skjemaet sendes inn, er Checkbox riktig: en bryter som ikke gjør noe før du trykker «Lagre» lover mer enn den holder.

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

Av og på

Eksempel

Kode

<div class="fs-switch-row">
<input class="fs-switch" type="checkbox" role="switch" id="epost" checked />
<label class="fs-label" for="epost">Varsle meg på e-post</label>
</div>

<div class="fs-switch-row">
<input class="fs-switch" type="checkbox" role="switch" id="sms" />
<label class="fs-label" for="sms">Varsle meg på SMS</label>
</div>

<div class="fs-switch-row">
<input class="fs-switch" type="checkbox" role="switch" id="brev" disabled />
<label class="fs-label" for="brev">Varsle meg i posten</label>
</div>

Lagring med en gang

Bryteren lover at endringen gjelder. Da må den også si fra når lagringen feiler, og gå tilbake:

<div class="fs-switch-row">
  <input class="fs-switch" type="checkbox" role="switch" id="varsler" />
  <label class="fs-label" for="varsler">Varsle meg på e-post</label>
</div>
<p class="fs-help-text" id="varsler-status" role="status"></p>

<script type="module">
  const bryter = document.getElementById("varsler")
  const status = document.getElementById("varsler-status")

  bryter.addEventListener("change", async () => {
    const pa = bryter.checked
    bryter.disabled = true

    try {
      await fetch("/api/varsler", {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ epost: pa }),
      })
      status.textContent = pa ? "Varsler er på." : "Varsler er av."
    } catch {
      bryter.checked = !pa
      status.textContent = "Klarte ikke å lagre. Prøv igjen."
    } finally {
      bryter.disabled = false
    }
  })
</script>

role="status" gjør at skjermlesere leser opp resultatet uten å avbryte det brukeren holder på med.

TypeScript

import { fs } from "@fristil/designsystem"

const bryter = document.querySelector<HTMLInputElement>("#varsler")

fs.setAttributes(bryter, fs.switch({ disabled: lagrer }))

Funksjonen setter både type og role, som er de to tingene som må stå sammen for at bryteren skal leses opp riktig. fs.switch.row gir klassen på raden rundt.

Importerer du den direkte i stedet for gjennom fs, heter den switchControl, siden switch er et reservert ord i JavaScript:

import { switchControl } from "@fristil/designsystem"

Klasser du kan style

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

Variabel	Standard
--fs-switch-width	var(--size-10)
--fs-switch-height	var(--size-6)

Knappen inni er en gradient og ikke et pseudoelement, fordi Firefox ikke rendrer ::before og ::after på et <input>. Den følger derfor høyden på bryteren av seg selv. Se Tilpasning.

Bryteren glir mellom av og på. Har brukeren bedt om mindre bevegelse i systemet sitt, bytter den i stedet tilstand uten overgang.

Tilgjengelighet

• Ledeteksten skal si hva bryteren styrer, ikke hvilken tilstand den er i. «Varsle meg på e-post», ikke «E-postvarsler på».
• Ikke skriv «Av» og «På» som tekst ved siden av. Skjermleseren sier det allerede, og teksten blir motsatt av seg selv når brukeren slår den om.
• Bryteren har ingen ugyldig tilstand. Er det påkrevd å slå den på, for eksempel for å godta vilkår, hører det hjemme i en Checkbox med required.
• Trenger endringen bekreftelse eller kan den ikke angres, bruk en knapp i stedet. En bryter som åpner en dialog er ikke en bryter.