In this demo tutorial, we are making the assumption that we need to create a radio slide toggle for our made-up payment options. For this we want to display 3 simple payment choices to the user:
- One-time payment
- Recurring payment
- Free tier payment
The Final Demo
Let’s get started with the base skeleton.
The HTML
There isn’t anything special happening here. We just contain all our labels and inputs into a .radio-toggles wrapper, make sure those labels are each properly connected to their corresponding inputs, and then add an empty .slide-item element (more on that later).
<divclass="radio-toggles"><inputtype="radio"id="option-1"name="radio-options"><labelfor="option-1">One-Time</label><inputtype="radio"id="option-2"name="radio-options"checked><labelfor="option-2">Recurring</label><inputtype="radio"id="option-3"name="radio-options"><labelfor="option-3">Free</label><divclass="slide-item"></div></div>The CSS
Now for the main event – the CSS. First we want to style the wrapper that holds all of our pieces together. You can tweak this to your liking, but I prefer a simple and clean style:
.radio-toggles{align-items:center;background:#eee;border:1pxsolidlightgrey;border-radius:9999px;display:flex;justify-content:center;margin:20pxauto;max-width:400px;overflow:hidden;padding:4px;position:relative;}Next, we “hide” (only visually) the default radio inputs:
input[type="radio"]{left:-9999px;position:absolute;z-index:-1;}Then we give the corresponding label elements a little spacing and breathing room:
label{cursor:pointer;padding:10px20px;text-align:center;width:33.33%;z-index:2;}Remember that .slide-item I referenced earlier? That element will be the visual “slider” that animates between the individual radio options. We style that like so:
.slide-item{background:white;border-radius:9999px;box-shadow:02px4pxrgba(0,0,0,0.15);height:calc(100%-8px);left:calc(33.33%+4px);position:absolute;width:calc(33.33%-8px);transition:left.4s;z-index:0;}You’ll notice the left, height, and width properties utilize the CSS calc attributes – this just gives some much needed padding and visual clean-up to the whole tabbed interface.
For the finishing touches, we just need to tell the .slide-item where to position itself based on which radio input is currently selected:
input[type="radio"]:nth-of-type(1):checked~.slide-item{left:4px;}input[type="radio"]:nth-of-type(3):checked~.slide-item{left:calc(66.66%+4px);}That’s pretty much it! You now have a fully functional, animated toggle slider with just a set of simple radio inputs and pure CSS.