Radio buttons

Default

Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected. If a user can select many option from a list, use checkboxes instead of radio buttons.
Border: #D0D2DA | Label text size: 12px (XS Paragraph) | Label text colour: #000000

:enabled

Radio item

:hover

Radio item

:focus

Radio item

:active

Radio item

:disabled

Checkbox item

Radio button build:

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Validation

Highlighting the component or input that a user hasn’t completed can help them to understand the problem and how to fix it.
Border: #D50000 | Error text size: 12px | Error text colour: #D50000

Radio item