Switch Example Using HTML Checkbox Input

This example illustrates implementing the Switch design pattern with an HTML input[type="checkbox"] as the switch element and using CSS borders to provide graphical rendering of switch states. It also demonstrates using the HTML fieldset and legend elements to present multiple switches in a labeled group.

Similar examples include:


Accessibility Preferences

Accessibility Features

Keyboard Support

Key Function
Tab Moves keyboard focus to the switch.
Space Toggles the state of the switch between on and off.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
switch input[type="checkbox"]
  • Identifies the element as an ARIA switch.
  • The accessible name is defined using the label element.
aria-hidden="true" span.on and span.off
  • Removes the strings on and off that appear to the right of the switch from the accessible name of the switch.
  • These strings are included only for enhancing visual comprehension of the state; element states are not permitted in accessible names.

Javascript and CSS Source Code

HTML Source Code