A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.

Important

The radio button text should never take the 100% width of the page in medium and up breakpoints. Radio button groups should always be grouped using <fieldset> .

Default

Label

When error is used think about what information you give the user in the error message.
The length of the error message shouldn't take 100% of the width of the page.

Error message

States

Default

States

Error message

Vue

Value selected: {{ selectedValue }}