How do radio buttons work

This component lets you add fully customizable radio button groups to your prototypes. You can customize the styles for the active, inactive, and hover states, as well as set the transition to got to a specific screen based on the selected option. All you have to do is drag the component on to your canvas to start! Radio Buttons Open in Framer to interact Preview this example.

Open in Framer Preview Example. What is a radio button? Why are they called radio buttons? Radio buttons and forms Radio buttons are often included in forms when the user must choose between a number of options that are presented together as a group. Radio button vs checkbox: which to use? Creating a radio button group When setting up your form elements in HTML, in order to be read as a group all the options in your radio group must have the same name.

If the value is not otherwise specified, it is the string on by default. This is demonstrated in the section Value above. We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.

To make a radio button selected by default, you include checked attribute, as shown in this revised version of the previous example:. Note: If you put the checked attribute on more than one radio button, later instances will override earlier ones; that is, the last checked radio button will be the one that is selected.

This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.

This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.

Radio buttons don't participate in constraint validation; they have no real value to be constrained. The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:. Most notable here is the use of the appearance property with prefixes needed to support some browsers.

By default, radio buttons and checkboxes are styled with the operating system's native styles for those controls. By specifying appearance: none , you can remove the native styling altogether, and create your own styles for them. Here we've used a border along with border-radius and a transition to create a nice animating radio selection. Am I just being picky when I insist on the correct use of checkboxes and radio buttons? There are good usability reasons to follow GUI standards and use the controls correctly.

Most important, following design standards enhances users' ability to predict what a control will do and how they'll operate it. When they see a list of checkboxes, users know that they can select multiple options. When they see a list of radio buttons, they know that they can only select one.

Of course, not every user knows this, but many do, especially since this has been a design standard since Because many people know how to operate standard GUI widgets, employing these design elements correctly enhances users' sense of mastery over technology. Conversely, violating the standards makes the user interface feel brittle — as if anything can happen without warning. Say, for example, that you assume you can click on a radio button without any immediate impact, and can thus consider your choices after making a selection but before hitting "OK.

Worse, it makes you fear what may happen as you work with forms elsewhere on the site. The biggest usability problems for checkboxes and radio buttons come from labels that are vague, misleading, or describe options that are impossible for average users to understand.

Contextual help can alleviate the latter problem, but it's still best to user test any important set of interaction controls. Luckily, checkboxes and radio buttons are easy to test using paper prototyping , so you don't need to implement anything to see if users understand the labels and can use the widgets correctly.

No professional interaction designer would make the mistake of using checkboxes when radio buttons are called for. The distinction between these two controls is one of the first things taught in any interaction design class. So here's a final reason to use the right widget: if you don't, you'll be taken for an amateur.

Jakob Nielsen , Ph. Donald A.