Radio Buttons

What is a radio button?

A radio button is a simple method of choosing between two or more options. Radio buttons are commonly used when designing online forms or questionnaires that require user input.

When unchecked, radio buttons typically take the form of a small circle with a black outline and white fill - although you can of course make them any size or color you wish. When clicked, however, a dot usually appears at the center of a radio button, indicating that this option has been selected.

Why are they called radio buttons?

Logically enough, radio buttons take their name from the physical buttons on old radios. When selecting a radio bandwidth such as AM, FM, or MW, it was necessary to deselect the previous bandwidth. For this reason, pressing a new bandwidth button automatically caused the old bandwidth button to pop out again to its neutral, disabled, position.

In web design, radio buttons work in exactly the same way. Regardless of whether you’re working with a CSS, Javascript, or HTML radio button, clicking on another button will automatically deselect the previous option.

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. With radio buttons, only one button in a radio buttons list can be selected at a time, so users are forced to select just one option from among several.

Radio button vs checkbox: which to use?

As they have quite different practical uses, it is important to understand the difference between a checkbox vs radio buttons.

To clarify, we can say that the defining characteristic of radio buttons is precisely the fact that, no matter how many different values are included in the group, only one of them can ever be selected at a given time. They are “either/or” options.

With checkboxes, on the other hand, users are also free to select either several or none of the options provided.

Radio button labels are another major difference over checkboxes: While checkboxes can show a single label depending on whether it’s a yes/no question, you need a label for every radio button option in a group.

Use radio buttons when:
● The possible answers to a given question are by nature mutually exclusive. E.g. the answer cannot logically be both “apple” and “orange” at the same time, but must either be one or the other. If some users might potentially prefer to choose neither apple nor orange, be sure to provide a radio button for this - such as one labeled “neither” or “other” - or risk having them give up without completing the form.

Use a checkbox when:

● You want to provide users with the possibility to select more than one answer from among a list of several options - including zero, one, or many. E.g. each checkbox is independent of all other checkboxes in the list, so selecting a given option doesn’t deselect any of the others.
● There is only one option - and in any case the user is not necessarily required to select it. For example, this might occur when asking if users wish to opt-in to a mailing list. In this case leaving the checkbox deselected would indicate that the user does not wish to receive the newsletter, whereas selecting the checkbox signs them up.

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. Once the group is created with the proper value of the name attribute, users selecting any radio button in that group will only be able to select one choice when filling out the form. As soon as they select one radio button all other radio buttons in the same group will automatically become deselected.

How to make a radio button form in Framer

Creating a radio button form element is simple to create with the Radio Buttons Default Component. 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!