Go to homepage

Projects /


Custom ON/OFF checkbox toggle.

View Demo

How to

The switch is a control used to toggle between 2 states (ON/OFF). It should be used together with a label that explains which option is being affected by the switch.

To create the custom checkbox, we hide the native input and stylize its <label>.

The component comes with some customization options. Try editing the CSS Variables in the snippet below to modify the switch:


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.