Toggle switch

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.

Referencer

ARIA Authoring Practices Guide (APG): Switch Pattern

<div class="row">
    <div class="col-12 col-sm-7 col-md-5" role="group" aria-labelledby="toggle-switch-heading">
        <h2 class="h5 mb-4 mt-0" id="toggle-switch-heading">Indstillinger</h2>
        <fds-toggle-switch label="Vis afsluttede sager" state="on"></fds-toggle-switch>
        <fds-toggle-switch label="Vis sager ældre end et år" state="off"></fds-toggle-switch>
    </div>
</div>

<div class="row">
    <div class="col-12 col-sm-7 col-md-5" role="group" aria-labelledby="toggle-switch-heading">
        <h2 class="h5 mb-4 mt-0" id="toggle-switch-heading">Indstillinger</h2>
        <fds-toggle-switch label="Vis afsluttede sager" state="on">
            <button type="button" role="switch" aria-checked="true">
                <span>Vis afsluttede sager</span>
            </button>
        </fds-toggle-switch>
        <fds-toggle-switch label="Vis sager ældre end et år" state="off">
            <button type="button" role="switch" aria-checked="false">
                <span>Vis sager ældre end et år</span>
            </button>
        </fds-toggle-switch>
    </div>
</div>

Konfiguration

Attributter

Funktioner

Events