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;
}