The web is no stranger to taking HTML elements and transforming them to look, act, and feel like something completely different. A common example of this is the switch, or toggle, component. We would hide a checkbox beneath several layers of styles, define the ARIA role as switch, and then ship. However, this approach posed certain usability issues around indeterminate states and always felt rather icky. After all, as the saying goes, the best ARIA is no ARIA.Well, there is new hope for a native HTML switch to catch on.Safari Technology Preview (TP) 185 and Safari 17.4 released with an under-the-radar feature, a native HTML switch control. It evolves from the hidden-checkbox approach and aims to make the accessibility and usability of the control more consistent.<!-- 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 />Communication is one aspect of the controls accessibility. Earlier in 2024, there were issues where the switch would not adjust to page zoom levels properly, leading to poor or broken visibility of the control. However, at the time I am writing this, Safari looks to have resolved these issues. Zooming retains the visual cohesion of the switch.The switch attribute seems to take accessibility needs into consideration. However, this doesnt prevent us from using it in inaccessible and unusable ways. As mentioned, mixing the required and indeterminate properties between switches and checkboxes can cause unexpected behavior for people trying to navigate the controls. Once again, Adrian sums things up nicely:The switch role does not allow mixed states. Ensure your switch never gets set to a mixed state; otherwise, well, problems. Adrian RoselliInternationalization (I18N): Which Way Is On?Beyond the accessibility of the switch control, what happens when the switch interacts with different writing modes?When creating the switch, we had to ensure the use of logical CSS to support different writing modes and directions. This is because a switch being in its right-most position (or inline ending edge) doesnt mean on in some environments. In some languages e.g., those that are written right-to-left the left-most position (or inline starting edge) on the switch would likely imply the on state.While we should be writing logical CSS by default now, the new switch control removes that need. This is because the control will adapt to its nearest writing-mode and direction properties. This means that in left-to-right environments, the switchs right-most position will be its on state, and in right-to-left environments, its left-most position will be the on state.See the Pen Safari Switch Control - Styling [forked] by @DanielYuschick.Final ThoughtsAs we continue to push the web forward, its natural for our tools to evolve alongside us. The switch control is a welcome addition to HTML for eliminating the checkbox hacks weve been resorting to for years.That said, combining the checkbox and switch into a single input, while being convenient, does raise some concerns about potential markup combinations. Despite this, I believe this can ultimately be resolved with linters or by the browsers themselves under the hood. Ultimately, having a native approach to switch components can make the accessibility and usability of the control far more consistent assuming its ever supported and adopted for widespread use.