🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Radio Switch

Custom radio toggle.

Copy: View demo

Dependencies

All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only 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

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