iPhone Style Radios Buttons with HTML, CSS & JavaScript

Works on desktop Safari, desktop Google Chrome, Android, iPhone, iPod Touch and iPad.

Have you ever surfed to a Web page on the iPhone or iPod Touch’s Safari browser and come across a form with standard radio buttons? It’s a pretty miserable experience trying to hit them with your finger. You have to zoom in to do so, maybe zoom in a lot. When Apple was designing the interface for the iPhone, they put a lot of thought into how to make conventional interface elements easier to use in a touch environment. If you think about it, what is a group of radio buttons but a list of items to select from. And only one item can be selected at a time. To cover this requirement Apple came up with the radio table control. A radio table is just a list of items, same as a radio button group. Only one list item can be chosen, and this is indicated by a checkmark on that particular list item which correlates to the single radio button being selected out of a group.

The radio button list looks like this:

One of the things that I really can’t understand is why people think a mobile touch interface needs radio buttons like on the desktop browser. All the other mobile frameworks are providing ways to implement the standard tiny, round radio buttons. They don’t work for touch interfaces. Get over it. The radio list works better for touch. Embrace it and love it and it will love you. Wait, I didn’t really mean that, but you get the picture. I have a hard enough time hitting normal sized controls designed for the iPhone. Heck, sometimes I can’t even find my iPhone, but that’s another issue.

To make this more like the Web equivalent of radio buttons I added real radio buttons to my solution. Here’s the markup to implement them (note that you still need to great the grouping of the radio buttons by giving each radio button in the list the same name):

<ul id="activityChoices" class="radioList">	
	<li>
		<span>Go eat something</span> 
		<span class="check">&#x2713</span>
		<input type="radio" name="activity" value="Go eat something" />
	</li>
	<li>
		<span>Take a nap</span> 
		<span class="check">&#x2713</span>
		<input type="radio" name="activity" value="Take a nap" />
	</li>
	<li>
		<span>Get some work done</span> 
		<span class="check">&#x2713</span>
		<input type="radio" name="activity" value="Get some work done" />
	</li>
	<li>
		<span>Play a game</span> 
		<span class="check">&#x2713</span>
		<input type="radio" name="activity" value="Play a game" />
	</li>
</ul>

Notice that the last item in each list item is the radio input. Please leave this as such, since it makes it easy for us to target the actual radio button as the last child of the list items child nodes. If you have a need to add other things into the list, insert them elsewhere in the list items collection of child nodes.

We’ll use CSS to hide the radio buttons and when a user touches a list item, we’ll use JavaScript to set the checked state of that list item’s radio button to true. After that, what you do with the user interaction is up to you. In many cases that initial choice can immediately trigger a corresponding action, or you may wait until the user takes a decisive final action that triggers a submit or post of all the selected inputs. Notice the span with the class “check.” It contains a hex value of “&#x2713” which is an HTML entity for a standard check mark. We’ll use CSS to position and hide or show it depending on the user’s interaction.

Here’s the CSS needed to make our list look like the iPhone one. Since the radio button group is based on the list control type, it shares some styles with standard lists:

.list, .radioList {
	-webkit-box-shadow: 2px 2px 4px #666;
	-webkit-border-radius: 12px;
	-moz-box-shadow: 2px 2px 4px #666;
	-moz-border-radius: 12px;
	box-shadow: 2px 2px 4px #666;
	border-radius: 12px;
}
.list li, .radioList li {
	cursor: pointer;
	padding: 8px;
	border-left:  1px solid #acacac;
	border-right: 1px solid #acacac;
	border-bottom: 1px solid #acacac;
	background-color: #fff;
	font-weight: bold;
	-webkit-tap-highlight-color: transparent;
}
.list li:hover, .radioList li:hover {
	background-image: 
		-webkit-gradient(linear, left top, left bottom, 
			from(#4286f5), 
			to(#194fdb));
	background-image: 
		-moz-linear-gradient(top, 
			#4286f5, 
			#194fdb);
	color: #fff;
}
.list li:hover:after, .radioList li:hover:after {
	color: #fff;
}
.list li:first-of-type, .radioList li:first-of-type {
	border-top: 1px solid #acacac;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
/** 
	Styles for single choice lists.
	These are the same in functionality as a 
	radio button group.
*/
.radioList li > .check {
	float: right;
	-webkit-transition: all 0.125s  ease-in-out;
	-moz-transition: all 0.125s  ease-in-out;
	transition: all 0.125s  ease-in-out;
	opacity: 0;
}
.radioList li.selected > .check {
	opacity: 1;
	color: #496691;
}
.radioList li > .check, .radioList li.selected:hover > .check {
	color: #fff;
}
.radioList li > input[type="radio"] {
	display: none;
}

The selector radioList li > .check defines the check mark. We set it’s initial opacity to 0 so that it is completely transparent. When the user selects a list item by clicking/touching, we add a “selected” class to the list item. The selector .radioList li.selected > .check then sets the check mark’s opacity to 100%.

To make all the behavior work, we need to write some JavaScript for a reusable control. We’ll use the light, mobile JavaScript framework ChococlateChip.

/** 
* 
* A method to initialize a list of radios buttons to present the user with a group of single choice options. It takes as the main argument, a unique selector identifying the view or section where the radio list resides.
*
* @method
* 
* ### RadioButtons
*
* syntax:
*
*  $.RadioButtons(selector);
*
* arguments:
* 
*  - string: string A valid selector for the parent of the tab control. By default the selector will target a class, id or tag of the radio list itself, so if you want to pass in a selector for a parent tag, such as an article, section or div tag, you'll need to make sure to put a trailing space on the end of the selector string.
*  - function: function A valid function as a callback. This is optional. The callback gets passed a reference to the clicked item, so you can access it in your callback function.
* 
* example:
*
*  $.RadioButtons("#buyerOptions");
*  $.RadioButtons("#buyerOptions", function(choice) {
	   // Output the value of the radio button that was selected.
	   // Since the actual radio button is the last item in a radio
	   // button list, we can use the last() method to get its value.
	   console.log(choice.last().value);
   };
*
*/
$.RadioButtons = function( viewSelector, callback ) {
	var items = viewSelector + ".radioList li";
	var radioButtons = $$(items);
	radioButtons.forEach(function(item) {
		item.bind("click", function() {
			radioButtons.forEach(function(check) {
				check.removeClass("selected");
			});
			this.addClass("selected");
			this.last().checked = true; 
			if (callback) {
				callback(item);
			}
		});
	});
};	

Because the radio input is the last child of the list’s node collection, we can set its checked value to true when the user clicks or touches a list item. We do this with the line: this.last().checked = true; We also manage toggling of the selected state of a list item by adding and removing a “selected” class. This hides or shows the check mark. We also have a conditional block to check for a callback. If one was passed as an argument, we invoke it. We pass in a reference to the list item that was clicked using the term “item.” This allows us to reference the clicked item in our callback. We can initialize a radio button list as follows:

// Radio button initialization:
$.RadioButtons("#activityChoices", function(item){
	$("#RadioButtons .response").fill(item.last().value);
});

In the above code we’re passing in a reference to the clicked list item in an anonymous function which fills a span with a class of “response” with the value of the list item’s radio button.

The radio button list has an id of “#activityChoices,” so I just pass that in. If “#activityChoices” were a parent node, I would have had to written the selector thus (notice the trailing space at the end before the closing parenthesis): $.RadioButtons(“#activityChoices “); This differentiation is necessary because the selector passed in gets concatenated with “.radioList li” to set up the radio button list’s functionality. There is no way for the control to know when you are targeting the list itself or a parent node. If the selector is the list itself, “.radioList li” gets appended to that, but if the selector is a parent node, you need to indicate that with a trailing space so that the “.radioList li” gets appended with the space separating. Otherwise the resulting complete selector will not identity the radio button list properly and nothing will get initialized. I hope this is clear. Yeah, I could have written the control to check to see if the selector was the list or a parent node, but that would have resulted in a performance hit as the code would have had to do quite a bit of evaluation to determine what the selector relation was.

Remember that the callback is optional. That means if you are construction a form with a submit process, then all you need to do for the radio button list is pass in a correct selector to initialize its behavior. You’ll then get the user’s choice during the submit process.

You can try out an example online or download the source code.