CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects

Radio Switch v2

A custom radio button with a switch element and two labels.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

How To

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:

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.