Toggle

Toggles have different states.

• developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
• developer.mozilla.org/en-US/docs/Web/CSS/:checked

Checkbox

Example: Label1 Label2

• developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox
• w3.org/WAI/ARIA/apg/patterns/checkbox
• open-ui.org/components/checkbox.research
• open-ui.org/components/checkbox

Radio Button

Example: Label1 Label2

• developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
• w3.org/WAI/ARIA/apg/patterns/radiobutton
• open-ui.org/components/radio-button.research

Toggle Switch

A toggle switch is used to flip the state between two different values; often between 'on' and 'off'. Toggling such a state has an immediate effect (unlike radio buttons or checkboxes), an explicit save or submit is not necessary. Visually, a toggle switch often looks similar to a light switch. [nngroup.com]

HTML does not include a native toggle switch. But there are discussions about adding it and WebKit already supports it [whatwg/html#4180, webkit.org, mozilla/standards-positions#990].

Further resources:

• w3.org/WAI/ARIA/apg/patterns/switch
• w3c.github.io/aria/#switch
• web.dev/building-a-switch-component
• open-ui.org/components/switch
• open-ui.org/components/switch.explainer
• github.com/openui/open-ui/issues/338