⚡️ Download 385 HTML, CSS, JS Components and 9 templates for $129 - Limited time offer ⏳


Progress value is 30%

Radio Switch

Custom radio toggle.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How To

The Radio Switch component is a control used to switch between 2 different options.

To create the custom radio elements in CSS, we hide the native input and stylize their <label>.

The component includes the following CSS custom properties:

:root {
  // style
  --radio-switch-width: 186px;
  --radio-switch-height: 46px;
  --radio-switch-padding: 3px;
  --radio-switch-radius: 50em;

  // animation
  --radio-switch-animation-duration: 0.3s;

Project duplicated

Project created

Globals imported

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