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

Web Component-koden er i beta

Læs mere om Web Components i beta-version. Hvis du har forslag til forbedringer eller kommentarer, kan du oprette et issue på GitHub eller sende en e-mail til FDS-teamet.

<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-settings">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-settings">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>

Om denne komponent

Denne komponent anvender light DOM. Det betyder, at komponenten genererer HTML, der kan tilgås ligesom al anden HTML på siden. Du kan som udvikler vælge mellem at tage Web Component-koden, hvis du vil lade komponenten generere HTML’en, eller tage versionen med den genererede kode, hvis du har brug for at ændre i HTML’en først. Begge muligheder vises i fanebladene i komponentens eksempler.

Uanset hvilken kode du tager, vil komponenten stadig aktivere den nødvendige JavaScript. Bemærk, at udvalgte light DOM-komponenter har en ready-attribut, du som udvikler kan bruge, hvis du i dit framework har behov for at udskyde initialisering af komponenten.

Læs mere på Web Components i beta-version om komponenternes anvendelse af light DOM og shadow DOM samt vores ønsker til feedback.

Konfiguration

Attributter

Funktioner

Events