3 Ways to Make Checkboxes, Radio Buttons Easier to Click

by on 08/10/11 at 12:50 am

Checkboxes and radio buttons are an essential part of forms. But most of the time, they’re not easy to click. This is because their click targets are small. The smaller a click target is, the more difficult it is to click it. Luckily, there are three things you can do to your checkboxes and radio buttons to make them easy for users click.

1. Use label tags

At the most basic level, your checkboxes and radio buttons should have label tags on them. This allows users to click the label to toggle the checkbox or radio button. This is easier for users to do because the label is usually a larger target to click than the checkbox or radio button itself. It also makes your checkboxes and radio buttons accessible to users who use screen readers.

2. Add hover effects to them

A checkbox or radio button may have label tags, but most users won’t know that they can click the label unless there’s a visual affordance that tells them that. A hover effect is a clear visual affordance that lets users know they can simply click the labels to toggle the controls.

3. Place them on a button zone

The last way to make your checkboxes and radio buttons easy to click is possibly the best way. Placing them on a button zone clearly tells users where they can click to toggle the controls. Not only can users click the label, but they can also click outside the label. This makes their click targets even bigger and easier to click. When users click on a checkbox or radio button, the button zone should highlight in color to tell users that it’s selected. This gives users the clear visual feedback they need when they’re looking at a dense area of checkboxes and radio buttons.

There’s a lot you can do to make your checkboxes and radio buttons more usable and accessible. If your form has a lot of them, try using these techniques to take the burden off your users. Making your checkboxes and radio buttons easier to click will increase the chances of users completing your form. This is exactly what you want to do if you have a long form that asks for a lot of information.

10 Responses to “3 Ways to Make Checkboxes, Radio Buttons Easier to Click”

  1. Anthony Sonego

    Aug 10th, 2011

    Thanks again Anthony.

    What do you think of the G+ iPhone app in relation a touch UI and the process of adding people to circles? I keep seeing the circles on the left of a person’s name and want to touch that circle to select the person. The whole button zone is active (good) but the feedback comes on the right hand side in the form of a tick in a green circle, which is usually obscured by my finger having hovered over the line and is on the other side from where I thought I touched the check box. Minor point – but it presents a moment of cognitive dissonance which leaves me second guessing my actions for a moment.

    • anthony

      Aug 11th, 2011

      Sounds like the visual feedback could be a lot clearer. Highlighting the whole button zone solves that.

  2. Razvan Girmacea

    Aug 10th, 2011

    Nice and very fast to implement advice. I did it for my ecommerce site on the checkout page just now. Took me 5 minutes and it looks great.

  3. Robert VIsser

    Aug 10th, 2011

    It would be helpful for the button zone to provide a how to tutorial, esp. one that would illustrate two solutions, one using css3 & one using javascript to enable an onclick event for the background zone.

  4. Kris

    Aug 10th, 2011

    Far out. I love this blog so much. You’re always giving well thought out UI tips. This is something i’ve kind of known but never solved.

    It makes sense, increase the clicking size.. might aswell make the entire thing a buttoN!

  5. tomelders

    Sep 5th, 2011

    A quick note for anyone wanting to use labels that interact with the form inputs: In order for it to work correctly in Safari, you need to nest the input in the label

    Label Text

    Which looks a bit clunky to me, but is apprently the correct way to use labels now.

    • Andrew

      Nov 25th, 2012

      You have to place ID’s on the inputs, and use that same ID in the label’s FOR attribute to get it to work in Safari (actually, I’ve just been doing that for so long I didn’t even realize the other browsers worked with that now.

      Nesting the input is not correct. I don’t even think the elements will validate without the FOR method in the near future – it’s essentially saying the input is part of the input’s label, and screenreaders will often muck it up.

      If you ask me, there should have just been a label attribute for the input fields from the beginning. The whole “use a sibling element to identify the next element in the document” thing has always baffled me.

Leave a Comment