toggle-switch Web Component

toggle-switch is a web component for the humble switch component that lots of websites use for things like toggling preferences. I constructed this element mainly to serve a full tutorial of mine, Making a Toggle Switch, which covers how to build a web component from the ground up while considering accessibility, testability, and customizability.

Key features include:

  • Generic: It is designed to be useable on any website
  • Customizable: It provides a flexible styling interface to make switches of all sorts
  • Accessible: It follows the WAI-ARIA guidelines for the switch role

My making this component was a followup to my popular typewritten-text, which had amassed thousands of views and downloads. As a teacher, I wanted to thoroughly show the how, using the toggle-switch as a demonstration.