Skip to content

Switch ​

Overview

A switch allow users to enter data by making a selection between two distinct and opposite states, such as β€œOn” and β€œOff”.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

From Figma to code ​

...

Customization ​

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS VariableTypeDescription
--z-switch--thumb--oncolorThe color of the thumb when the switch is on
--z-switch--thumb--offcolorThe color of the thumb when the switch is off

Accessibility ​

...