Radio group usage guidelines

A radio group allows a user to select a single option from a short list while showing all available options together.

When to use

• Use when only one item can be selected from a list.
• Use when the user needs to quickly select a single option.
• Use when the user needs to see all of the available options at a glance.

When not to use

• Use checkboxes if multiple items can be selected from a list.
• Use single select if there are more than 5 choices to select or display.

Properties

Radio button states

Preview

Radio group

Selected

Unselected

Disabled

Readonly radio group

Read-only

Code

import { Radio, RadioGroup, Stack } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={32}>
      <RadioGroup label="Radio group" direction="horizontal" value="selected">
        <Radio value="selected">Selected</Radio>
        <Radio value="unselected">Unselected</Radio>
        <Radio value="disabled" isDisabled>
          Disabled
        </Radio>
      </RadioGroup>

      <RadioGroup label="Readonly radio group" direction="horizontal" isReadOnly>
        <Radio value="readonly">Read-only</Radio>
      </RadioGroup>
    </Stack>
  );
}

State	Use cases
Selected	The selected state indicates that an option is selected or “turned on”. The user is saying yes, they want this option.
Unselected	The unselected state indicates that an option is unselected or “turned off”. The user is saying no, they don’t want this option.
Read-only	Read-only radio buttons cannot be interacted with by the user, but they are still focusable and accessible to assistive technologies. Use the read-only state for situations where the selection cannot be changed, but the label content still needs to be communicated to the user.
Disabled	Disabled radio buttons cannot be interacted with, focused, nor accessed in any manner by assistive technologies. The disabled state should only be used for irrelevant options that cannot be selected.

Formatting and layout

Placement

Use the vertical radio group whenever possible. Only use the horizontal radio group when space does not allow it to be vertically aligned. Radio groups must have a title that gives users context for the selections in the group. The title is always placed above the radio group, even if the list is horizontal.

Do

Favorite fruit

Apple

Banana

Cherry

Do

Favorite fruit

Apple

Banana

Cherry

Form alignment

The radio group should be left-aligned with the rest of the form elements.

Do

Name

Favorite fruit

Apple

Banana

Cherry

Submit

Content writing

• Do use clear and concise labels.
• Always include a title for the radio group that gives users context for the selections.
• Do use sentence case for radio button labels.
• Do not use very long sentences, or multiple sentences for labels.
• Do not ever have an independent radio button. Radio buttons should always be used in a group.
• List the options in a logical order such as alphabetical, simple to complex, or most commonly selected first.
• End the description and error text with a period or equivalent punctuation mark. This helps screen reader users understand where the description and error text ends, and it improves readability for all users.

Behaviors

Description text and error text

Radio groups can optionally include description text and error text to give users more context and understanding. The description text and error text will always be at the bottom of the group, not underneath an individual radio button. All text should be limited to one sentence and clearly give users any additional information needed in plain language. Error text must always give users a path to resolving the issue.

Text wrapping

The radio button will always be top aligned with the text label even if the text is too long to fit on one line and needs to wrap. Do not center align the radio button. Radio button label text should be relatively consistent in length across the radio group, so you shouldn’t have some labels that are only a few words long in a group with others that are full sentences.