Overview
Radio buttons allow the user to choose one option from a set, 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.
Anatomy
The radio button component consists of a set of clickable circles (the inputs) which can be used in combination with text labels positioned to the right or, added to cards & tiles. If there is a group of radio buttons, a group label can be added.
Structure
Group label (optional): Describes the group of options or provides guidance for making a selection.
Radio button input: A radio button indicating the appropriate state. By default an option is selected.
Radio button label: Describes the information you want to select or unselect.
Alignment
Arrange the radios vertically to make it easier for users to compare options, especially in forms and settings. If only horizontal layouts are an option, arrange the radios and labels so that it is absolutely clear which option belongs to which label.
Content
Group labels (optional)
A heading can accompany a set of radio buttons to provide further context or clarity.
A group label can either state the category of the grouping or concisely instruct what actions to take below depending on the context.
Use sentence case for group labels.
Radio button labels
Always use clear and concise labels for radio buttons.
Labels appear to the right of radio button inputs.
Labels should be concise and provide context.
Behaviors
States
The radio button input allows for two states: unselected and selected. Only one radio button should be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
In addition to unselected and selected states, radio buttons also have states for focus, disabled, read-only, error, and warning.