A Native Switch Control Inches Closer to HTML

For years, building a switch or toggle component meant hiding a checkbox under custom styles, adding role="switch", and hoping assistive technology interpreted it correctly. That workaround always carried usability risks, particularly around indeterminate states. Now, after much back-and-forth in standards discussions, Safari has shipped support for a native HTML switch control, arriving in Safari Technology Preview 185 and Safari 17.4.

The feature adds a switch attribute to checkbox inputs, sidestepping the need for CSS-based lookalikes. Alongside the attribute, Safari introduced two new pseudo-elements — ::thumb and ::track — that give developers styling hooks to customize the control without breaking its inherent semantics.

Understanding the Default Behavior

Out of the box, Safari’s switch resembles a typical iOS toggle. The control respects the accent-color and color-scheme properties, offering simple theming without additional markup. But to take full advantage of the new pseudo-elements, you’ll need to remove the default appearance first.

Before applying any custom styles, you must set appearance: none on the input. Once that’s removed, you take responsibility for positioning the switch’s parts across its on and off states. Treat the base input’s styles as the container that holds the thumb and track — these styles will also serve as fallbacks in browsers that don’t support the feature yet.

For more granular control, the switch input itself supports its own ::before and ::after pseudo-elements, which can be used independently of the new switch-specific ones.

Styling the Thumb and Track

The ::thumb pseudo-element targets the movable handle of the switch — the part users interact with. You can shape it however you like, whether that’s a traditional circle or something entirely different. Since appearance: none shifts positioning responsibility to you, transitions and animations between states become possible, letting you animate the thumb’s movement rather than just swapping styles.

Meanwhile, ::track styles the background along which the thumb slides. As is often the case with CSS, this element isn’t strictly limited to being a visual track — it can serve as an extra layer for creative layouts. The combination of these two pseudo-elements offers a level of styling flexibility that previously required several nested elements and hacky selectors.

Feature Detection Strategies

Since the switch attribute is currently only available in Safari, you’ll need reliable detection before using it in production. CSS and JavaScript both offer workable paths.

For CSS, you can check for the ::thumb pseudo-element, which shipped alongside the switch attribute. Wrapping your switch styles in an @supports rule that tests for ::thumb allows you to provide fallback styles for unsupported browsers. If you’d rather default to the switch, use the not keyword to explicitly target unsupported environments. Note that in Safari, this check requires enabling the experimental “::thumb and ::track pseudo-elements” feature flag to avoid false positives.

For JavaScript, feature detection can be done by creating an input element and checking whether the switch property exists on it. If it does, you can add a class to the document root and conditionally style or script based on that marker.

Design and Semantics Considerations

The convenience of adding a switch attribute to a checkbox comes with conceptual baggage. While they share the same underlying input element, checkboxes and switches behave differently in ways that are easy to overlook:

  • Checkboxes support an indeterminate state; switches do not.
  • Switches can be marked as required; checkboxes cannot.

Coupling these two controls in one input makes it possible for these attributes to be combined unintentionally, resulting in unexpected behavior. The discrepancy also extends to how assistive technologies announce state: checkboxes are reported as “checked” or “unchecked,” while switches are reported as “on” or “off.” Even the :checked CSS pseudo-selector has different implications when applied to a switch versus a checkbox — a subtle but meaningful distinction for users relying on screen readers.

VoiceOver in Safari does announce the switch as on or off, but inspecting the accessibility properties in Safari’s developer tools still references “checked.” There were also earlier issues in 2024 where the control didn’t scale properly at different zoom levels, though these appear to have been resolved since.

Adrian Roselli, who has tracked switch support across browsers and screen readers, notes that the switch control remains far from production-ready. He offers historical context: a switch element was proposed with WHATWG HTML in 2018, saw work from Google and WICG discussion, then stalled. A new WHATWG PR in July 2023 introduced the current switch attribute proposal, which has not yet been merged — making Safari’s early support notable but premature for widespread adoption. As Roselli puts it, “For more context, a switch element was proposed with WHATWG HTML in 2018, Google worked on it for a while, along with some WICG discussion, then abandoned it. Open-UI started a discussion in 2021, but other than a comment on valid indeterminate use cases, has mostly died there. Then in July 2023 … a new contributor filed a WHATWG PR to add a switch attribute to a checkbox and here we are. Note that it has not been merged into WHATWG HTML, so Apple Safari has chosen to get way ahead of this one.”

The takeaway: the switch role does not allow mixed states. Ensure your switch never gets set to a mixed state; otherwise, problems are likely.

Localization and Directionality

One area where the native switch shines is its handling of different writing modes. Since the control is built into the browser, it automatically adapts to the nearest writing-mode and direction properties. In left-to-right environments, the rightmost position means “on”; in right-to-left environments, the leftmost position does. This removes the burden of manually writing logical CSS to flip the control’s behavior — a step that’s easy to overlook when building custom toggles.

Where the Switch Stands

The native switch control is a welcome step forward from the checkbox-hiding approach that’s dominated the web for years. Having a native option could improve accessibility and usability consistency across browsers — but only if adoption spreads. The effort combines the checkbox and switch into a single input for convenience, which introduces real risks around markup combinations and semantics.

While linters or browser-level handling might address those inconsistencies later, the control isn’t ready for mainstream use. Right now, Safari’s early support is useful for experimentation, but the attribute has not been merged into the HTML standard, and testing across screen readers shows mixed results. The potential is clear, but production deployments should wait until the control gains broader support and maturity.