NL Design System
Switch #293
Replies: 9 comments
-
AmsterdamScreenshots / VariantenStorybook Default Hover Focus Disabled Checked Checked + Hover Checked + Focus Checked + Disabled With label Notities
|
Beta Was this translation helpful? Give feedback.
-
Den HaagScreenshots / VariantenFigma States Notities
|
Beta Was this translation helpful? Give feedback.
-
DSOScreenshots / VariantenStorybook Default Focus Disabled Checked Checked + Focus Labelled by ID Zichtbaar label Notities
|
Beta Was this translation helpful? Give feedback.
-
DUOScreenshots / VariantenDocumentatie 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
|
Beta Was this translation helpful? Give feedback.
-
RotterdamScreenshots / VariantenFigma Default Focus Checked Notities
|
Beta Was this translation helpful? Give feedback.
-
UtrechtScreenshots / VariantenStorybook Default With invisible Hover Focus Focus-visible Checked Disabled Checked and disabled Notities
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Aanvulling van Rian in draadje Hiep Hoi bericht.
|
Beta Was this translation helpful? Give feedback.
-
✨ Dit component is nu Help Wanted ✨Help je mee hem door de Community stappen te krijgen? |
Beta Was this translation helpful? Give feedback.
-
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.
Switch in HTML - Hidde de Vries
In deze blogpost beschrijft Hidde dat Apple experimenteert met Switch als variant op een Checkbox.
Beta Was this translation helpful? Give feedback.
All reactions