Switch
A control for toggling binary values like on/off
Demo
See more examples
API
Tag
Name | Type | Content | |||||||
---|---|---|---|---|---|---|---|---|---|
input[type=checkbox] |
Native element | None |
Attributes
Name | Value | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
is required |
switch | Defines the checkbox as a switch (a difference in style only) | |||||||
checked |
Boolean attribute | Standard checkbox attribute | |||||||
disabled |
Boolean attribute | Standard checkbox attribute |
Events
Name | Detail | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
input |
None | Switch is a checkbox, so you can listen to the same standard input event. | |||||||
change |
None | Switch is a checkbox, so you can listen to the same standard change event. |
Guidelines
Standalone or form
A switch can be used on its own or more commonly as a list of options in a form, like this:
Network settings
Accessibility
MDN says, "The first rule of ARIA is if a native HTML element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding ARIA. Instead use the native HTML checkbox of <input type="checkbox">
, which natively provides all the functionality required."