---
# System prepended metadata

title: Introducing the New "switch" attribute

---

## Introducing the New "switch" Attribute for Checkbox Inputs in HTML

Exciting news for web developers and designers. The latest version of Safari (17.4) in the WebKit Features introduces support for a new attribute called "switch" for checkbox inputs. This addition is set to revolutionize the way users engage with checkboxes, enhancing user experience and interaction on the web.

Traditionally, checkboxes have been styled in various ways to look at switches, often requiring custom CSS or JavaScript solutions. However, with the introduction of the "switch" attribute, developers can now achieve this desired switch-style appearance with minimal effort and maximum compatibility, offering numerous advantages that align with the principles outlined by the W3C for HTML design. 

This approach ensures **graceful degradation**, enabling immediate utilization of this input type checkbox tag. Supported browsers will display a switch interface, while unsupported ones will revert to a standard checkbox. This guarantees a seamless experience for all users, without the necessity of waiting for universal browser compatibility. 

Here's a quick example of how to implement the `switch` attribute:

```html
<input type="checkbox" switch>
```

![screenshot-rocks (7)](https://hackmd.io/_uploads/B1PLN0xAT.png)

This native switch also supports the `accent-color` and `color-scheme` CSS properties.

```html
<input type="checkbox" switch style="accent-color: DarkViolet;">

<input type="checkbox" switch style="accent-color: DarkViolet; color-scheme: dark;">
```

![screenshot-rocks (10)](https://hackmd.io/_uploads/B1D2_Cx0p.png)


Right now, this feature is supported exclusively in the latest beta version of Safari (17.4), promising a sleek and intuitive user interface experience.

This introduction marks a significant step forward in HTML's evolution, offering developers a convenient and standardized way to create intuitive UI elements. Keep an eye out for future updates and browser support expansions as this exciting feature continues to gain traction in the web development community.

### Reference
https://webkit.org/blog/15063/webkit-features-in-safari-17-4/