Skip to content
ARIA Switch control web component
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
.gitignore
README.md
index.html
index.js

README.md

Switch web component

An example of switch controls (role=switch) built as a web component.

I'm sure this could be better constructed, so PRs are welcome :)

Available attributes

  • labelled-state:
    If set, will display "On" and "Off" text labels in toggle UI.
  • check:
    If set, will default to "on / checked" state. Otherwise will default to "off / unchecked".
  • disable:
    If set, will default to disabled state.

Example on CodePen

Screen Reader Quirks

Please review the breakdown of screen reader issues with role="switch". While this particular link goes to an example of using role=switch on a checkbox, the same issues occur if using role=switch on a button element as well, as this web component does.

License & Such

This script was written by Scott O'Hara.

It has an MIT license.

Do with it what you will :)

You can’t perform that action at this time.