Skip to main content

Official Website

of the Commonwealth of Pennsylvania

The .gov means its official.

Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
Components

Radio Button

Radio buttons are used when you have a group of mutually exclusive choices and only one selection from the group is allowed.

Overview

Radio buttons are used for mutually exclusive choices, 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

Form: Can be used in tiles, data tables, modals, side panels, and in forms on full pages.

Settings: 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

If a user can select from multiple options, use checkboxes instead of radio buttons. Radio buttons allow the user to select only one item in a set whereas checkboxes allow the user to select multiple items.

Formatting

Anatomy

The radio button component is comprised of a set of clickable circles (the inputs) with text labels positioned to the right. If there is a group of radio buttons, a group label can be added.

Accordion anatomy diagram
  1. Legend (Group label):  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.
  4. Helper Text
 

Placement

The radio button component is often used in forms. Forms can be placed on a full page, in a modal, or in a side panel. A radio button can also be used for changing settings in a menu or selecting a singular item in a data table.

Content

Legend (Group label)

  • A legend can accompany a set of radio buttons to provide further context or clarity. In some cases, a group of radio buttons may be within a larger group of components that already have a group label. In this case, an additional group label for the radio button component itself is not needed.

Radio button labels

  • Always use clear and concise labels for radio buttons.
  • Labels appear to the right of radio button inputs.

Overflow content

  • We recommend radio button labels being fewer than three words.
  • If you are tight on space, consider rewording the label. Do not truncate radio button label text with an ellipsis, instead wrap to a second line.

Behaviors

States

The input allows for two states: unselected and selected. The default view of a radio button is having at least one radio button preselected. Only one radio button should be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.

Accordion anatomy diagram