Skip to Main Content


PRESENTER: This tutorial explores checkboxes and radio buttons. We're going to cover which elements to use, the markup, the name attribute, adding a caption, and styling radio buttons and checkboxes.

Section one, which element to use?

Radio buttons should be used when you want to present users with more than one option, and you want to allow them to choose only one of these options. For example, if you wanted users to choose a subscription option, you would use a series of radio buttons to present all options.

Checkboxes, on the other hand, should only be used when you want to present users with one of more options and you want to allow them to choose any number of these options. For example, if you wanted users to subscribe to a newsletter, you would present users with a single checkbox. If you wanted to find out what sort of applications the users have at home, you would use a series of checkboxes to present all options.

Section two, markup. Radio buttons and checkboxes require an input element and an associated label element. In both cases, the label elements once need to be positioned after the inputs. These two elements need to be explicitly associated with each other, using the "for" and "ID" attributes. If the label is wrapped around the input, the label content must come after the input.

Section three, the name attribute. In the case of radio buttons, the name attribute is important. The value for the name attribute must be identical for all radio buttons that are used in the same set of options. This identical name value means that users can only choose one option from within a set of options. In this example, all the input elements have the name attribute with an identical value of "sub."

Section four, adding a caption. When presenting a set of radio buttons, a caption is needed to explain their purpose. This is done by wrapping a radio button set inside a field set and then using the legend as a caption. In this example, the content, "subscription method" would then be announced when the user sets focus on the first radio button when they're traveling down the form. And the same information would also be announced when the user sets focused on the last radio button when traveling up the form.

An alternate approach. An alternative approach is to use the aria role and aria label by attributes. The overall container needs to be set with a role attribute and with the value of radiogroup. A heading needs to be placed inside the container, and this will become the caption for this group of radio buttons. The heading needs to be given an ID value, and then the overall container needs to point to this heading element. In this case, both of them have a value of sub. This solution will operate in a similar way to field set and legion elements. The heading will be announced as a caption for the radio group.

Section five, styling radio buttons and checkboxes. One common concern that developers have with radio buttons and checkboxes is that they are hard to visually customize. Some developers solve this problem using the div element and custom background images instead of using a native input and label element. However, these types of solutions present a range of accessibility issues. Unlike the input and label elements, div elements used in this way have no semantic meaning. And the solution doesn't have any in-built keyboard functionality. So keyboard-only users often can't navigate or select options.

Using background images for radio buttons and checkboxes also presents issues for users who use high contrast mode. Background images are often not displayed when in this mode, so users have no way of identifying these custom radio buttons or checkboxes. A simple solution is to use native radio buttons and checkbox elements, and then use CSS to add a pseudo-element on top. This pseudo-element can be given a background image so that radio buttons and checkboxes can be customized. With this solution, if the background images aren't available, the native input elements underneath are displayed. Now this is going to be covered in a later video.

Conclusion-- so there you have it-- a simple review of checkboxes and radio buttons.

Except where otherwise noted, this work is licensed under a Creative Commons by Attribution Sharealike 4.0 License, copyright 2018, California Community Colleges Chancellor's Office. These works are licensed under a Creative Commons Attribution 4.0 International license. They're available to everyone and maybe repurposed to meet the unique needs of educational institutions.