Radio buttons are part of a group of two or more. They signal an action where users can only select one radio button.
Using radio buttons
Radio buttons must feature a descriptive label. They must be part of a group of radio buttons of at least two. A radio button may also have sub-components or child radio button groups.
Radio buttons make the selection visually distinct.
Radio button label
Its labels should be as short as possible, with text that clearly states what selection is chosen once the corresponding form is submitted.
Radio button group label (optional)
If 2 or more radio buttons are grouped, it's recommended that the group also carries a clear label.
States of radio buttons
The styles for its states were designed with accessible color variations additional to the 'disc' icon to distinguish the checkbox' following visually separated states in switched on and off mode (e.g. disabled, hover, active):