Radio

Components

Radio

Numeric entries are similar to text entries, but are used to enter numeric values and include controls to incrementally increase or decrease the value.

Preview

Figma

Uses

Lists of mutually exclusive options in which only one option can be selected because by pressing one the rest is automatically deselected.

When to use

In forms, manners or side panels.

To switch from one setting to another on a menu, page, or component.

Choose an item within tables or lists of data.

Show all the available options.

When not to use

If you can select several options from the list, we must use the Checkbox and not limit the number of selections.

If there are two options that show an on/off setting we consider using a switch.

For lists with more than seven options we consider a Select.

Good practices

It is recommended to have a minimum of two elements and a maximum of seven.

We use tags for the groups.

We show the options in a logical order, from more likely to less likely to be selected, from simpler to complex operation, from less to greater risk...

We show a group option selected by default. If safety and security allow it, select the most likely or convenient option.

If an unselected state is needed we add a “None” option.

We avoid ordering in alphabetical order because it depends on the language .

We avoid overlapping options, example 0-10; 10-20; Which option would be selected if you want to choose 10?.

With the first upper case letter.

We do not use commas or semicolon at the end of each line.

Behaviour

Types

Simple

Button

Types

Orientation in list mode

Horizontal

Vertical

Types of radio in forms

Visualization of the radio component without text

No text

With text

States

Default

Hover

Focus

Select

Disabled

Select Disabled

Error

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The label property is always necessary to control the accessibility of the radio button.

The radio button has role="radio"

If the radio button is checked, the aria-checked property is set to true, otherwise it is set to false.

If it is a radio group buttons are contained in an element with role="radiogroup".

If there are elements that provide additional information about the radio button group or each radio button, those elements are referenced by the radio group element or the radio button elements with the aria-described property.

If it is a group of radio buttons it is encapsulated between the “fieldset” labels and the label gets inside the “legend” label.

If the radio buttons group is mandatory, it has the aria-required property.