Sam Breed

Product Developer, Investor

Three-way Switch

Two-way switches are common, but three-way switches are not.

First posted on

Sometimes you need to toggle between three values but most off-the-shelf component libraries don’t cover this use case. Changing color themes between system and light/dark is a common use case.

The purpose-built HTML form element to use is the <input type="radio"> element. A group of radio elements with a common name property will allow only one radio element to be checked at a time, with a unique value associate with each input. However, the default styling of radio elements leaves something to be desired, e.g.:

Fortunately, using the exact same markup, a <fieldset> and three <input type="radio"> elements, each with a <label>, you can easily implement a three-way switch with CSS.

Bringing it all together:

See the Pen 3 way switch by Sam Breed (@wookiehangover) on CodePen.

There’s also (at the time of writing) a three-way toggle in the footer of this website.

Categories