While it seems like new web technologies are introduced every year to engage visitors, there are some that have stood the test of time and won鈥檛 be going away. In this post, we鈥檒l be discussing one such element, the humble HTML radio button.
From contact forms to multiple choice tests, you鈥檝e probably seen radio buttons before (even if you didn鈥檛 know exactly what they were called). These circular elements are a must-know if you want to gather user information from the front-end of your website.
Conveniently, HTML has a built-in input type for radio buttons, and implementing them on a page is pretty straightforward. Here, we鈥檒l review what radio buttons are, when to use them, and how to code a form with radio buttons in HTML.
Radio buttons almost always appear in groups of two or more to represent related, mutually exclusive options. Within this group of options, a user may only select one at a time. This means that selecting a radio button deselects another selected button in the group. Also, users can鈥檛 deselect a radio button by clicking it. The only way to deselect a radio button is to select another option within the group.
Radio buttons are similar to another common interactive element, the checkbox. The differences between these two are small but important to note: Whereas radio buttons let users select exactly one option per group, checkboxes let users choose (or 鈥渃heck鈥�) one, multiple, or no options per group. Users can also deselect a checkbox by clicking it 鈥� radio buttons don鈥檛 allow this.
I鈥檒l admit this isn鈥檛 the most thrilling topic. However, mixing up these two can cause serious confusion from visitors. So, be sure to use radio buttons for 鈥淪elect one鈥� menus, and save checkboxes for your 鈥淪elect all that apply鈥� menus or your one-off questions (i.e., 鈥淐heck this box if鈥︹��).
Now that we understand the purpose of HTML radio buttons, let鈥檚 learn how to make them.
To create a radio button in HTML, use the <input> element with the type radio. This creates a single radio button that users can interact with:
See the Pen by Christina Perricone () on .
Of course, we鈥檒l need to add a bit more code to make this useful. Specifically, we鈥檒l want multiple buttons and labels for each button. Here鈥檚 what a simple radio button group should look like, using just HTML:
See the Pen by Christina Perricone () on .
Here we have three <input> elements of type radio, with some new attributes as well. There鈥檚 also a new <label> element for each <input>. Let鈥檚 review each thing we added to the code.
First, the id attribute is a unique identifier for the <input> tag. It can be used as a CSS selector for the radio button element, and it also unites the button with its corresponding <label>.
As mentioned, radio buttons come in groups. Use the required name attribute to group together a set of related radio buttons. In the above example, all <input>s share the same value for name, so they are treated as part of the same group. This lets users only choose one option in a group at a time 鈥� try it out above.
Next, the value attribute represents a unique value for the radio button. Users don鈥檛 see it, but this is submitted to represent the chosen option. For example, if the form above was submitted with the 鈥�17 years or younger鈥� item selected, the system processing the form would receive the value age=child. If the user does not select any radio button, no value will be sent. If the value attribute is missing for the selected option, the form will send the default value on.
Note that <input> tags only create the radio button element, not the label. To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag.
While using <label> isn鈥檛 strictly necessary, it鈥檚 considered a best practice for two reasons. First, the semantically rich<label> element makes your website more accessible for people using screen readers. It tells them which label is paired with which radio button. Second, the for attribute lets users select a radio button by clicking the label itself in addition to the button, making your form easier to use.
Finally, the <br> (line break) tags put each option on a new line. Try removing these tags in the example above to place all options on the same line.
Radio button inputs have one additional attribute, the checked attribute. If included in the <input> tag, the button will be selected by default.
See the Pen by Christina Perricone () on .
What good are radio buttons if users can鈥檛 send in their responses? That鈥檚 why radio buttons usually go inside HTML forms. The HTML <form> element contains child elements that collect user input, such as <input type=鈥漴adio鈥�>.
To make a basic form with radio buttons in it, wrap your radio button grouping(s) in a <form> tag, and include a <button> of type submit at the bottom. When the user clicks 鈥淪ubmit,鈥� their responses are sent to the form handler. See below for a simple form example.
See the Pen by Christina Perricone () on .
Radio buttons are everywhere on the web. In fact, they鈥檙e so common that HTML has its own input type for them, allowing anyone with HTML knowledge to insert them on a page. As long as the code is written properly, the browser will handle all basic functionality for you.
As a final reminder, make sure that you鈥檙e using radio buttons in the right cases. Remember to use radio buttons when you want users to pick just one option from a group, and checkboxes if you want to allow users to select multiple options and uncheck their selections.