UI Deploy

Curated, Short, Web UI Dev we Love.

Pure CSS toggle switch with two labels

For an upcoming web project, I needed a switch which chose between two options. Not “on or off”, like a checkbox; more “tea or coffee”, one choice or the other. That could indeed be a checkbox (checked means “tea”, unchecked means “coffee”) but that’s not really right; it’s, semantically, two radio buttons. But visually it was meant to look like a toggle switch with two labels: “tea” and “coffee”, and a switch to switch between them.

view source

Advertisement