Are you tired of using checkbox hacks to create switch controls on your forms? Well, there’s good news! HTML might soon offer a native way to implement switch controls by introducing a switch attribute for checkbox inputs. After years of development, Safari has taken the lead by supporting this attribute in Safari Technology Preview 185 and Safari 17.4. Let’s dive into the details with Daniel Yuschick as he explores the new switch controls and discusses the considerations that need to be addressed before it becomes mainstream.
The web environment has always been about transforming HTML elements to look and behave differently. Switch or toggle components are a perfect example of this transformation. In the past, we relied on hiding checkboxes and adding layers of styles to create switches. But now, with the introduction of the switch attribute, a native HTML switch is on the horizon.
Safari Technology Preview 185 and Safari 17.4 have rolled out a new feature without much fanfare — a native HTML switch control. This control aims to improve accessibility and usability compared to the traditional hidden-checkbox method.
<!-- This will render a native checkbox --//>
<input type="checkbox" />
<!-- Add the `switch` attribute to render a switch element --//>
<input type="checkbox" switch />
<input type="checkbox" checked switch />
See the Pen [Safari Switch Control – Basic [forked]](https://codepen.io/smashingmag/pen/QWREJPR) by @DanielYuschick.
Styling It Up With Pseudo Elements
With the introduction of the switch attribute, we also get new ::thumb and ::track pseudo-elements for styling the switch. These pseudo-elements provide an opportunity to customize the switch control like never before.