Switch demos

The markup for switches is <input type="checkbox" switch>. It comes built-in with ::thumb and ::track pseudo-elements. The ::before and ::after pseudo-elements can also be used for extra possibilities!

The switch control is enabled in Safari Technology Preview.

Native switch (unstyled)

The native switch supports the accent-color and color-scheme CSS properties.

Your browser does not support the ::thumb and ::track pseudo-elements. The demos below will not render properly.

The pseudo-elements can be enabled in Safari Technology Preview behind the relevant feature flag in Develop > Feature Flags. See Apple's documentation on how to enable the develop menu if you don't yet have it enabled.

Basic styled switch

Show CSS

Basic styled switch with symbol

Show CSS

Sliding track

Show CSS

Labeled switch

Show CSS