Web features: [\](https://webstatus.dev/features/switch-control) [accent-color](https://webstatus.dev/features/accent-color) > [!NOTE] > **Note:** These guides are authored for AI coding agents (apologies for the robotic tone!). To have your coding agent adopt these patterns automatically, check out [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance). Use the HTML `switch` attribute on `` with an associated `` to build a binary on/off toggle that preserves native form submission, keyboard navigation, and screen reader semantics (see [Styling Checkboxes](https://developer.chrome.com/docs/modern-web-guidance/guides/ui-components/checkbox.md.txt) and [Forms](https://developer.chrome.com/docs/modern-web-guidance/guides/forms/forms.md.txt)). ## Markup Add the boolean `switch` attribute to a standard checkbox input: ```html Enable notifications ``` - The label can wrap the input or be associated with `for`/`id`. All styling targets the input, so it doesn't depend on the label structure. - When checked, the input submits its standard checkbox value. In JavaScript, listen for `change` (or `input`) events and read `.checked` rather than `.value`. ## Styling Customize the control's highlight color using `accent-color` (see [Brand-Consistent Forms](https://developer.chrome.com/docs/modern-web-guidance/guides/forms/brand-consistent-forms.md.txt)) and ensure visible focus styling: ```css input[type="checkbox"][switch] { accent-color: var(--accent-color, #1769e0); margin: 0; cursor: pointer; } input[type="checkbox"][switch]:focus-visible { outline: 3px solid var(--focus-color, #ff8c00); outline-offset: 4px; } ``` ## Fallback strategies ### Fallbacks \& browser support for switch-control If your Baseline target does not support ``, load `input-switch-polyfill` only when `'switch' in HTMLInputElement.prototype` is `false`. Do not load the polyfill unconditionally. The polyfill enhances checkboxes with the `switch` attribute by setting `role="switch"`, applying switch styling (`appearance: none`), syncing computed `accent-color`, and providing pointer drag support. Use the package-loading approach appropriate to your project. The example below assumes your setup can resolve module specifiers: ```javascript if (!('switch' in HTMLInputElement.prototype)) { import('input-switch-polyfill'); } ``` ### Fallbacks \& browser support for accent-color The `accent-color` property is progressive enhancement. Browsers that do not support this property will ignore it and use their default UI colors. Source: [switch guide on GitHub](https://github.com/GoogleChrome/modern-web-guidance-src/blob/main/guides/forms/switch/guide.md)