Radio Buttons

Radio buttons are interactive form elements that allow users to select one option from a group of five or fewer predefined choices.

Overview

Use radio buttons within radio button groups. Both radio buttons and their groups have their own unique props and events.

Radio buttons and radio button groups have a tablet/mobile breakpoint of 1024px. On tablet and mobile screens, they will shrink to better fit the limited content area while still retaining a large touch target area.

Design and Layout

Anatomy

ElementDescription
1. Radio Button Group Container Holds all components of the radio button group
2. Label Text for the label element
3. Optional Optional note can be added for non-required fields
4. Tooltip Provides additional information
5. Radio Buttons Individual buttons that can be stacked vertically or horizontally
6. Help Text Displays additional information such as formatting requirements
7. Input Notification Displays error messages

Style Variations

Each radio button uses a distinct color, line weight, and effect to clearly communicate its purpose, providing visual feedback and enhancing usability.

STATEEXAMPLE
Default
Focus
Selected
Error
Disabled

Radio Button Widths

General Layout

When individual radio buttons in a group have varied text lengths, set all radio buttons to the width of the widest one.

Minimum Widths

Vary radio button widths to fit the viewport to ensure consistent spacing and adequate touch target sizes. The minimum widths are as follows :

  • Desktop: 182px
  • Tablet: 162px
  • Mobile: Full width of the content area

Dos and Don'ts

Do
  • Do use radio button groups for form fields with five options or fewer.
Don't
  • Don't use a horizontal layout for more than three options or options longer than one or two words. Use vertical stacks, as they are easier for users to scan.
Do
  • Do ensure all options are the same width. If one option is wider due to text length, set all options to the width of the widest one.
Don't
  • Don't use a radio button if users can only select one option. Radio buttons are for selecting from at least two options. For single certifications or acknowledgements, use a checkbox.

Installation

Radio Buttons

Radio Button Group

Props

Radio Buttons

Radio Button Group

Events

Radio Buttons

Slots

Radio Button Group