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

Currently unavailable

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