Official website

of the Commonwealth of Pennsylvania

Components

Radio Button

A radio button let users choose one option from a list of two or more choices. When a user picks a new option, the previous one is automatically unselected.

Overview

A radio button let users choose one option from a list of two or more choices. When a user picks a different option, the previous one is automatically unselected.

Each radio button label should tell the user exactly what they’re choosing.

General guidelines for using radio buttons:

  • Keep the label short and meaningful— usually three words or fewer.
  • Use sentence case.
  • Don’t use ALL CAPS.

Usage

When to use

Use radio buttons when the user must choose only one option. They are often used in forms and data tables.

Keep the list of options short. Avoid long lists, which overwhelm users.

When not to use

Don’t use radio buttons if users need to choose more than one option. Use checkboxes instead.

Accessibility

Every radio button needs a clear and concise label.

Keyboard

  • Users should be able to use arrow keys to move between radio buttons.
  • Use Space to select a radio option.

Related components

We want to hear from you

This is a pre-release version of Keystone Design System. If you're a beta tester, we want your bug reports, questions, and feedback.

 

Complete our form to share your thoughts—just log in with your PA.gov email. We'll review and consider every response.