Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Interface elements
Components
Radio Button
Radio Button
Numeric entries are similar to text entries, but are used to enter numeric values and include controls to incrementally increase or decrease the value.
Uses
Lists of mutually exclusive options in which only one option can be selected because clicking on one option automatically deselects the rest.
How to use
On forms, manners or side panels.
To change from one setting to another in a menu, page or component.
Choose an item within tables or lists of data.
Show all available options.
How not to use
If several options can be selected from the list we should use the Checkbox and not limit the number of selections.
If there are two options that show an on/off configuration we consider using a Switch.
For lists with more than seven options we consider a Select.
Good practice
It is recommended to have a minimum of two elements and a maximum of seven.
We use labels for the groups.
We show the options in a logical order, from most likely to least likely to be selected, from simplest to most complex operation, from least to most risky...
We show a group option selected by default. If security and safety allow, select the most likely or convenient option.
If an unselected status is required we add a "None" option.
If it is not possible to have a list with all the options we add an "Others".
We avoid alphabetical sorting because it depends on the language.
We avoid overlapping options, e.g. 0-10; 10-20; which option would be selected if you want to choose 10?
With the first capital letter.
We do not use commas or semicolons at the end of each line.
Behaviour
Types
Simple
Button
Orientation in list mode
Horizontal
Vertical
Types of radio button in forms
Without text
With text
States
Default
Hover
Focus
Select
Disabled
Select Disabled
Error
Accessibility
This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.
The label property is always needed 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 group of radio 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, these elements are referenced by the radiogroup element or the radio button elements with the aria-describedby property.
If it is a group of radio buttons it is encapsulated between the "fieldset" tags and the label is put inside the "legend" tag.
If the radio buttons group is mandatory, it has the aria-required property.
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
