Skip to main content

Radio Buttons

Radio buttons are used when options are mutually exclusive.

Specifications

  • Always stack radio buttons vertically. Horizontal variation should not be used.
  • Uses the same :hover and :active styles as the primary Button.
  • A set of radio buttons should not default to having one option selected.
  • A heading much accompany a set of radio buttons.

There are two sizes of radios, default (24 x 24) & large (32 x 32).

Radio Buttons Specifications

States

Radios have the following states:

  • Default
  • Focus
  • Checked
  • Disabled

Radio Buttons States

Behaviors

  • A set of radio buttons should default to having one option selected, generally the first option. However, if pre-selection of an option results in incorrect assumptions (i.e., “Male” or “Female”) then no option should be selected by default.
  • If selecting no option is a viable choice, include a radio button within the group with an appropriate label, i.e. “None”.
  • A radio button’s label is part of the clickable area of the control.

Editorial

  • If necessary, a heading can accompany a set of radio buttons to provide further clarity for the user. Use sentence-case (only the first word in a phrase and any proper nouns capitalized).
  • Always use a clear and concise label for radio buttons. Be explicit about the action that will follow if the radio button is selected. Labels appear to the right of radio buttons. Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) and no more than three words.
Last updated February 8, 2023.