Of Check-Boxes and Radio Buttons

In either a responsive website or a mobile app, is it okay to use radio-buttons and check-boxes when you have a list of items that the user needs to select?

Yeppers.

1 Like

People have always bitched about how tiny and crappy HTML check-boxes and radio-buttons are.

Is there a way to create a better experience in RWD and Mobile Apps?

Also, how would your website/app process these controls? Are they “tappable”?

Yup. Your finger is your mouse.

I’ve never had any issues with people + checkboxes/radio buttons on mobile.

Increase the size of the checkbox/radio if needed, I guess. It might help users?

That’s where <label> is a help. The label is a bigger target.

Probably why I never have seen why this is an issue (radios/checkboxes not being enough room to “tap” or click) :smiley: .

<label> should ALWAYS be used, as it also improves accessibility.

But in HTML5, is there a way to size radio-buttons and check-boxes to make them a reasonable size and not microscopic like they have been in the past?

You can/have always been able to increase the size of radios/checkboxes with CSS.Whether it turns out cross-browser is another thing (just gotta test it). Form styling is always attrotious.

Remember, HTML has nothing to do with styling.

That’s because styling of form inputs is starting to get into the territory of the browsers’ “native look and feel”.

i.e. Though technically not part of browsers’ chrome a text input should look like a text input, a radio should look like a radio, etc. No matter what site is being viewed.they should look and act consistent to how the browser user expects them to.

Like a lot of people, my only complaint is how tiny they are. Can be very hard to see…

They are plenty big enough on mobile (assuming you have the viewport meta tag in place) but as both Ryan and Allan have said above you can always associate them with a label to increase the target hit area.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.