Radio Switch v2
A custom radio button with a switch element and two labels.
Projects /
Projects /
A custom radio button with a switch element and two labels.
The Radio Switch (v.2) component is used to display a toggle and two labels (the two options).
To create the custom switch, we use two radio input elements and style them so that they have the same dimension of the switch element and are translated to overlap. Their z-index is then modified so that only the unchecked input is selectable.
The <label> elements are then moved to the side of the switch so that the user can interact with those as well.
The component comes with some customization options. Try editing the CSS Variables in the snippet below to modify the radio switch:
