Radio buttons allow users to make a single selection from a set of options.

Remix

Radio buttons allow users to make a single selection from a set of options.

Remix

Radio buttons allow users to make a single selection from a set of options.

Remix

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.

When to use

  • 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 not to use

  • 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.

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

  1. Group label (optional): Describes the group of options or provides guidance for making a selection.

  2. Radio button input: A radio button indicating the appropriate state. By default an option is selected.

  3. 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.