Radio button

A radio button typically represents a single option in a group of related choices.


Radio button states
Loading story...
Radio button group
Loading story...

View in Pajamas UI Kit →


Numbered diagram of a radio button structure
Radio button structure
  1. Legend: A title for a group of radio buttons.
  2. Radio button: The input element that provides the visual affordance for the control.
  3. Label: Text indicating the option.
  4. Help text (optional): Used to further clarify an option.


When to use

  • Use a radio button group for a set of options, where only one option can be selected at a time.

When not to use

Add when not to use. Create an issue


  • Radio buttons use high-contrast colors for labels and custom styles (based on Bootstrap) instead of browser defaults for the radio control.
  • Radio buttons are vertically stacked, with one radio button per line.


  • In a radio button group, only one option can be selected at a time and there must be a default selected option.
  • To pick an option, the user can select the radio button or its content.



  • Radio button labels are set in regular font weight, positioned to the right of the element, and should be as short as possible.


  • Use a fieldset with legend (set in bold font weight and positioned above the group of radio buttons) to group a set of radio buttons. Some screen readers will announce the contents of the legend before each nested input to maintain context for a user.

Help text

  • Help text can be added below the radio button label or as a paragraph below the group.


  • Do not nest or add other elements within a radio button group. Keep the radio button group as a single cohesive unit to ensure the user can properly traverse the controls.
Add additional accessibility specifications. Create an issue

Last updated at: