Radio Buttons vs Checkboxes

By Beacon News | Published October 20, 2014 | Categories: Web Development

Sometimes when designing forms there’s some confusion as to when to use radio buttons and when to use checkboxes, but actually the rules are quite simple.

Radio buttons are used for two or more choices that are mutually exclusive. This means that only one can be selected at a time. The term “radio button” comes from the physical buttons of older car radios. When one button was pressed the other buttons would pop out. This made it so that only one button could be pressed in at a time.

Checkboxes offer a binary choice such as on/off or true/false. They can be used alone or they can be used in a group to offer multiple selections.

A group of radio buttons can be a great alternative in some cases to having your user select their choice from a drop down menu because it makes all the options visible right there on the page so they are more easily accessible. This may be a preferable way to present options to users on mobile devices that are viewing your responsive website. They can then select their choice with just one tap instead of the several that are needed to use a drop down menu on a mobile phone. This may not always be the best option if you have a lot of choices because it can make the page look cluttered. Every situation is unique and you must consider the design of the content and also the needs of your users.

Radio buttons and checkboxes can both be restyled using CSS to have the appearance of buttons. This is an excellent option to enhance usability for touch devices.

Image courtesy of ViralPatel.net