Radio buttons are changing their shapes to button groups which are more comfortable when it comes to mobile user experience. So I thought creating one myself to learn the challenges behind it and found it quite interesting.
The technique is pretty simple. What I did is, I used labels to control the design of the button group buttons and made the radio buttons hidden in the view.
<input type="text" id="name"/>
<label for="radio1" id="label1" accesskey="N">Male
<input class="radio" id="radio1" type="radio" name="gen" /></label>
<label for="radio2" id="label2" accesskey="N">Female
<input class="radio" id="radio2" type="radio" name="gen" /></label>
Here I have added two more fileds( a text box and a button) so that we can check the tab navigation is also working fine with the button group control.
border: 1px solid #ccc;
Here you can see the opacity of the radio buttons is set to 0.0 so that it will be hidden in the view. I have also set a left position value to -10px so that it will not occupy an additional space inside the view. The associated label is stylised such that it will look like buttons rather than a text component.
You can find the entire code and it’s working in Jsfiddle.
Thanks for reading.