Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Toggle switch
En toggle switch er en digital tænd/sluk-knap. Til forskel fra en radioknap eller tjekboks træder valget i kraft i det øjeblik brugerne interagerer med komponenten.
Sådan bruges komponenten
Anvendes til
En toggle switch bruges til at slå en enkelt mulighed til eller fra med det samme. Brugerens valg træder altid i kraft, så snart der trykkes på switchen.
Anvendes ikke til
En toggle switch anvendes ikke, hvis valget først træder i kraft efter klik på fx en gem-knap. Vælg i stedet radioknapper eller tjekbokse i de tilfælde.
Vejledning
Sørg for at brugen af toggle switch implementeres konsekvent i en løsning.
Giv switchen en kort og præcis label, som placeres til venstre for toggle switchen. Afstanden mellem label og knap vurderes i den enkelte løsning afhængigt af kontekst, enhed og længden på teksten. Hvis samme side har mere end én toggle switch, placeres toggle switchene dog altid lige under hinanden, så knapperne visuelt står i en lige linje.
Installation
HTML Struktur
<div role="group" aria-labelledby="toggle-switch-heading"
class="w-percent-100 w-percent-sm-60 w-percent-md-40">
<h2 class="h5 mb-4 mt-0" id="toggle-switch-heading">Indstillinger</h2>
<button class="toggle-switch w-percent-100" type="button" role="switch"
aria-checked="true"><span>Vis afsluttede sager</span></button>
<button class="toggle-switch w-percent-100" type="button" role="switch"
aria-checked="false"><span>Vis sager ældre end et år</span></button>
</div>Bredden på toggle switches skal tilpasses til ens løsning fx med hjælpeklasser (utilities).
Brug role="group" for grupper af toggle switches og angiv en passende aria-labelledby (APG, Switch Pattern).
Javascript
Der medfølger ikke funktionalitet med denne komponent. Når der trykkes på switchen, skal man derfor selv - udover at implementere den ønskede funktionalitet - sørge for at skifte værdien i attributten aria-checked til true/false.