Switch

[Rozerinay]

We willen graag meer leren over de Switch component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Switch

Doel

Invoerveld om een optie aan of uit te zetten, waarbij de actie direct wordt doorgevoerd.

Ook bekend als

Toggle, Toggle Switch, Form Toggle

Gerelateerde componenten

Checkbox, Radio Button

Onderzoek

Toggle-Switch Guidelines - NN Group
In dit artikel beschrijft Alita Joyce paar richtlijnen voor een Switch component. Ze zet de verschillen tussen Checkboxes en Radio Buttons naast elkaar en geef enkele tips voor het ontwerp van een Switch.

Toggle button - Inclusive components
Uitgebreid artikel met afwegingen die komen kijken bij het implementeren van een Toggle button.

On Designing and Building Toggle Switches - Sara Soueidan
Uitgebreid artikel met afwegingen die komen kijken bij het implementeren van een Toggle Switch.

Under-Engineered Toggles - Adrian Roselli
In dit artikel beschrijft Ardian Roselli zijn afwegingen bij het ontwikkelen van een Toggle op basis van een Checkbox.

Under-Engineered Toggles - Adrian Roselli
In dit artikel beschrijft Ardian Roselli zijn afwegingen bij het ontwikkelen van een Toggle op basis van een Button.

Switch Role Support - Adrian Roselli
In dit artikel beschrijft Ardian Roselli de support voor de Switch role in combinatie met de Checkbox en Button. En welke invloed dit heeft op schermlezers.

Toggles suck! - Axess Lab
In dit artikel beschrijft Joel Holmberg waarom hij Toggles verschrikkelijk vindt. Hij geeft hiervoor als reden dat de status van de Toggle vaak niet goed is te begrijpen. Dat ze niet toegankelijk zijn. Dat ze inconsistent worden gebruikt op het web en er geen native HTML ondersteuning is. Hij adviseerd om Checkboxes of Radio Buttons te gebruiken.

Why Toggle Switches suck, and what to do instead - Adam Silver

Switch in HTML - Hidde de Vries
In deze blogpost beschrijft Hidde dat Apple experimenteert met Switch als variant op een Checkbox.

[jeffreylauwers]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default

Hover

Focus

Disabled

Checked

Checked + Hover

Checked + Focus

Checked + Disabled

With label

---

Notities

• Documentatie beschikbaar.
• Unchecked: Thumb links, grijze achtergrond.
• Checked: Thumb rechts, donderblauwe achtergrond.

[jeffreylauwers]

Den Haag

Figma - Huidig

---

Screenshots / Varianten

Figma

States

---

Notities

• Onder de naam: Toggle
• Documentatie beschikbaar (Figma)
• Unchecked: Thumb links, grijze achtergrond.
• Checked: Thumb rechts, groene achtergrond.

[jeffreylauwers]

DSO

Storybook

---

Screenshots / Varianten

Storybook

Default

Focus

Disabled

Checked

Checked + Focus

Labelled by ID

Zichtbaar label

---

Notities

• Onder de naam: Slide Toggle
• Unchecked: Thumb links, grijze achtergrond.
• Checked: Thumb rechts, donker groene achtergrond.

[jeffreylauwers]

DUO

Documentatie website

---

Screenshots / Varianten

Documentatie website

Algemeen voorbeeld

States unchecked

States checked

Switch in horizontaal: Een horizontale switch

Table switch: Een switch als deze binnen een tabel wordt geplaatst.

---

Notities

• Documentatie beschikbaar
• Unchecked: Thumb links (zwart), witte achtergrond, zwarte 2px solid border. Rechts het woord 'Uit'.
• Checked: Thumb rechts (wit), blauwe achtergrond, border krijgt zelfde kleur als achtergrond. Rechts het woord 'Aan'.
• Varianten verschillen in formaat. Kleiner binnen een tabel.

[jeffreylauwers]

Rotterdam

Figma

---

Screenshots / Varianten

Figma

Default

Focus

Checked

---

Notities

• Switch heeft rechte hoeken.
• Thumb is een wit vierkant met 6 lichtgrijze stippen.
• Unchecked: Thumb links, grijze achtergrond.
• Checked: Thumb rechts, groene achtergrond.

[jeffreylauwers]

Utrecht

• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default

With invisible <input type="checkbox">

Hover

Focus

Focus-visible

Checked

Disabled

Checked and disabled

---

Notities

• Onder de naam: Form Toggle
• Unchecked: Thumb links, grijze achtergrond.
• Checked: Thumb rechts, donker blauwe achtergrond.

[Rozerinay]

Vragen en overwegingen bij componentontwikkeling

Component is tijdens Estafettemodeldag 2 opgebouwd op basis van de Utrecht component.

Vragen die zijn meegegeven voor verdere uitwerking:

• Thumb: ook een token voor min-block-size toevoegen?
• Margin: doen we niet in Figma, maar zouden we de track een padding kunnen geven?
• Color en background color: waar zijn deze tokens precies voor bedoeld?
• Box shadow: alleen toepassen op de disabled thumb? Indien we een shadow toevoegen, zou dat eerder voor de abled state verwacht worden dan voor de disabled state.
• Focus tokens: waarom nu wel, terwijl dit bijvoorbeeld bij een button niet gebeurt?
• Extra border tokens: toevoegen voor de thumb zodat de vorm zichtbaar blijft in high-contrast mode?
• Icoon toevoegen: zodat er niet alleen op kleur wordt vertrouwd voor de ‘checked/unchecked’ state?

Bron: notities uit een comment in de NL Design System Figma bibliotheek (2024).

[Rozerinay]

Opmerking afkomstig uit een comment in de NL Design System Figma bibliotheek:

Na overleg met Robbert icoon toegevoegd.
https://github.com/nl-design-system/kernteam/issues/847

[MariekeBrouwer]

Bij Groningen wordt hij momenteel gebruik voor een dark modus, waarin we eigenlijk ook bij de documentatie erna hebben gedefinieerd dat :

• het alleen gebruikt wordt wanneer er een directe wijziging is in de interface
• bij gebruik van meerdere switches onder elkaar, moeten de opties niet gerelateerd zijn aan elkaar (bv. bluetooth aan/uit. wifi aan/uit)

[jeffreylauwers]

Aanvulling van Rian in draadje Hiep Hoi bericht.

Of “waarbij de actie direct wordt doorgevoerd” aan WCAG voldoet verdient nog een discussie.
https://nldesignsystem.nl/wcag/3.2.2/

Maar bij een settings pagina zie ik het vaak en ik vind het een mooie oplossing. Een save optie aan het eind is wellicht wel zo fijn.
To be continued. Dus, ja als component toevoegen, en nadenken over de exacte implementatie.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Switch op het Community bord

[JJGrootveld]

In de ToDo Bibliotheek staat op dit moment een disabled state gedocumenteerd voor de Switch component.

Wat is de rationale achter het wel aanbieden van deze state t.o.v. het sterke afraden van disabled states in de Button component?

Misschien trek ik dit te ver door, maar is een Switch niet eigenlijk ook een submit button voor een specifieke actie?
https://www.nldesignsystem.nl/richtlijnen/formulieren/buttons/disabled-submitbuttons/#disabled-submitbuttons

Als de actie die gelinkt is aan de toggle niet door de gebruiker uitgevoerd kan worden, moet dat dan uberhaupt getoond worden?