Check boxes vs Radio Buttons: a few thumb rules

The checkboxes vs radio buttons debate is one that has flummoxed the best designers, When does one use a check box and when does one use a radio button?

To answer the question which should be put where, here’s a simple thumb rule: if you want only a single answer to your question then use a radio button; otherwise, use a check box. Your user will not be able to click more than a single answer if you use radio buttons before the options. The second click will always deselect the first one. A check box on the other hand will let your reader click on one or several options without any being deselected.

For instance, you should use a radio button if you want your user to answer the following question:

Q. Do you want email alerts?

This is because there can be only one answer to this question: Yes or No.

In contrast if you want the user to be given a choice then you need to use check boxes, as has been done in the following question:

Q. Who all would you like to send this email to?

1. Mother 2. Father 3. Sister 4. Brother 5. Friend

Here the user may want the mail to be sent to one or all the people listed. You therefore need to provide checkboxes.

That was about usage. However, there are other things that you should keep in mind as well while designing pages that deal with questions. Here are a few dos and don’ts.

-- Use standard visual representations. Checkboxes are tiny square boxes which when selected have a cross or a checkmark sign appear inside them. Radio buttons are small circles which when selected have a thick dot appear inside them.

-- Separate a group of choices from another so that it becomes clear to the reader what he or she needs to select from. Scattered information is both user unfriendly as well as aesthetically ugly.

-- Use visual breaks whenever possible. This makes it easy for a reader to journey through loads of information and also makes it simple to assimilate information.

-- List one option per line. This is the easiest on the eye and the mind. However if your layout requires a horizontal format make sure that each option is separated from the previous one by ample space and that there is no confusion about which button belongs to which option.

-- Use neutral, affirmative copy that helps a reader understand what you want him or her to do with the choices given. Always include the option of “other” when you think you may not have been able to cover all parameters in the choices you have listed.

-- Give the reader the option of selecting not just by clicking on the button or the box, but also by clicking on the label itself. Some people tend to click on whatever is the largest visually.

-- Give the user the option of an access key so that he or she does not have to navigate with a mouse always. This is of particular help to people with disabilities.

Finally remember that web designing is as much about sense as sensibility. Be logical, be considerate and be creative. You will invariably be a good web designer.

© Copyright 2020 Diversified Technologies  508-760-3758
Cape Cod, MA 02664
Privacy Policy | Terms of use | Contact us
Also visit