Toggle Group

Gruppen er radioknapper i forkledning. Hvert alternativ er en <label> med en <input type="radio"> inni, krympet bort visuelt. Da beholder du piltastene, FormData og at skjermleseren sier «2 av 3», uten at noe av det må skrives på nytt.

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

<fieldset class="fs-toggle-group">
<legend class="fs-sr-only">Visning</legend>

<label class="fs-toggle-group__option">
  <input type="radio" name="visning" value="liste" checked /> Liste
</label>
<label class="fs-toggle-group__option">
  <input type="radio" name="visning" value="kart" /> Kart
</label>
<label class="fs-toggle-group__option">
  <input type="radio" name="visning" value="kalender" /> Kalender
</label>
</fieldset>

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/toggle-group.css"
import "@fristil/designsystem/sr-only.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"

<fieldset {...fs.toggleGroup()}>
  <legend {...fs.srOnly()}>Visning</legend>
  <label className={fs.toggleGroup.option}>
    <input type="radio" name="visning" value="liste" defaultChecked />
    Liste
  </label>
</fieldset>

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 gruppe = document.querySelector<HTMLFieldSetElement>("#visning")
if (!gruppe) throw new Error("fant ikke elementet")

fs.setAttributes(gruppe, fs.toggleGroup())

fs.toggleGroup.option gir klassen på hvert alternativ. Selve valget leser du som vanlig:

gruppe.addEventListener("change", (hendelse) => {
  const valgt = (hendelse.target as HTMLInputElement).value
})

<legend> er påkrevd selv når den er skjult. Uten den vet ikke den som hører siden hva de tre alternativene velger mellom.

Når det ikke er denne du skal ha

Situasjon	Komponent
Ett valg blant tre til fem korte alternativer	Toggle Group
Ett valg blant mange, eller lange alternativer	Radio i en Fieldset
Flere valg samtidig	Checkbox
Av og på for én innstilling	Switch
Handlinger, som «fet, kursiv, understreket»	Knapper med `aria-pressed`

Klasser du kan style

Klasse	Hva det er
`.fs-toggle-group`	Gruppen
`.fs-toggle-group__option`	Ledeteksten rundt hvert alternativ

Variabel	Standard
`--fs-toggle-group-radius`	`var(--fs-spacing-1)`
`--fs-toggle-group-height`	`var(--fs-spacing-10)`
`--fs-toggle-group-padding`	`0 var(--fs-spacing-4)`

Den valgte flaten settes med :has(input:checked), altså fra tilstanden på den ekte radioknappen. Det er ingen egen klasse å holde i synk.

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

Radioknappen er krympet bort, ikke fjernet. display: none ville tatt den ut av tastaturrekkefølgen, og da virker ikke piltastene.
Piltastene flytter mellom alternativene og velger samtidig. Tab hopper ut av hele gruppen. Slik virker radioknapper, og det skal ikke overstyres.
Alternativene må være korte. Blir teksten lang, er det egentlig en liste med radioknapper.
Ikke la et valg utløse noe som ikke kan angres. Brukeren treffer alle alternativene på veien når hen blar med piltastene.