Radio Buttons: definition and examples

Home

Glossary

Radio Buttons

Summary:

Get started

Join 500K+ professionals learning on Uxcel

Frequently Asked Questions

What is a radio button?

A radio button is a graphical user interface element that allows users to make a single choice from a group of options. It is typically represented by a small circle that can be selected by clicking on it. When a radio button is selected, a small dot or marker appears inside the circle to indicate the user's choice.

In a group of radio buttons, only one option can be selected at a time. When a user selects one radio button, any previously selected radio button in the group becomes deselected. This is in contrast to a checkbox, which allows multiple options to be selected simultaneously.

Radio buttons are commonly used in forms and surveys to present a list of mutually exclusive options to the user. They are also used in settings and preferences menus to allow users to make a single choice from a list of options.

In web development, radio buttons are typically implemented using HTML and CSS, and can be made interactive using JavaScript or a scripting language like PHP.

What’s the difference between a radio button and a checkbox?

A radio button and a checkbox are both graphical user interface elements that allow users to make selections, but they function in different ways.

A radio button is used to present a list of mutually exclusive options to the user, where only one option can be selected at a time. When a user selects one radio button, any previously selected radio button in the group becomes deselected. They are typically represented by a small circle that can be selected by clicking on it, and when selected a small dot or marker appears inside the circle.

On the other hand, a checkbox is used to present a list of options where multiple selections can be made. They are typically represented by a square box that can be selected or deselected by clicking on it, and when selected a small tick mark appears inside the box.

In summary, the main difference between a radio button and a checkbox is that radio buttons are used for mutually exclusive options, where only one option can be selected at a time, whereas checkboxes are used for multiple selections.

How are radio buttons used in UX design?

Radio buttons are used in UX design to present a list of mutually exclusive options to the user, where only one option can be selected at a time. They are commonly used in forms, surveys, settings and preferences menus.

Some examples of how radio buttons are used in UX design include:

In a survey or questionnaire, radio buttons can be used to present a list of predefined options for a question, allowing the user to select one and only one answer.
In a form, radio buttons can be used to present a list of options for a field, such as gender or marital status, allowing the user to select one and only one answer.
In settings or preferences menus, radio buttons can be used to allow users to make a single choice from a list of options, such as selecting a default language or theme.
In e-commerce, radio buttons can be used in the product page, to allow the user to select one and only one option from different colors, sizes or materials of the product.

When using radio buttons in UX design, it's important to make sure that the options are clearly labeled and easy to understand, and that the selected option is clearly indicated. Additionally, the radio buttons should be placed in a logical and consistent order, and the group of radio buttons should be clearly separated from other groups of radio buttons or checkboxes.

Furthermore, it is important to consider the accessibility of the radio buttons. They should be designed in a way that can be used by users with visual impairments, and should be compatible with keyboard navigation and screen readers.

Related courses

Core UI Components

Learn how to design buttons, forms, cards, and other core UI components, and understand the reasoning and best practices behind their usage in every project

4.8

Intermediate

Design Terminology

Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.

4.7

Beginner