Design

Radio button

A radio button is a graphical user interface element used in digital products to allow users to select one option from a set of mutually exclusive choices.

Structure

It is typically represented as a small circular button or dot that can be filled or highlighted when selected.

States

The radio button can appear in various states, which are described as follows:

Default:

Border: 2px, dark grey (#7C7C7C)
Fill: white (#FFFFFF)
Opacity: 100%

Selected:

Border: 2px, light green (#65AC1E)
Fill: light green (#65AC1E)
Opacity: 100%

Default, disabled:

Border: 2px, dark grey (#7C7C7C)
Fill: white (#FFFFFF)
Opacity: 40%

Selected, disabled:

Border: 2px, light green (#65AC1E)
Fill: light green (#65AC1E)
Opacity: 40%

Use case

Radio buttons are commonly used in forms, settings menus, surveys, and other scenarios where the user needs to make a single selection from a predefined list of options. They ensure that only one option can be chosen at a time, as selecting a new radio button automatically deselects the previously selected one within the same group. In conclusion:

Simplifying decision-making
Presenting mutually exclusive choices
Collecting user preferences or settings

Best practice

To enhance the usability and accessibility of radio buttons in web design, it is recommended to follow best practices such as providing clear and concise labels, offering a default selection, using a logical order for options, and ensuring proper spacing and alignment.

Additionally, radio buttons should be used in conjunction with other form elements like text inputs or dropdowns when collecting more complex data.