Remix
Remix
Remix
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.
The user is only allowed to select one option from a list of related items.
The user must see all options and compare the available options before making a choice.
Can be used in tiles, tables, modals, side panels, and in forms on full pages.
Used to change from one setting to another in a menu, page, or component. It can often act as a filtering mechanism.
When providing users with multiple options to select from, checkboxes should be used instead of radio buttons.
Users can choose more than one item from a list. In this case, use a Checkbox instead.
Users need to toggle items on or off with an immediate effect. In this case, use a Toggle instead.
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.
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.
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.
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.
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.
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.