You need to show two or more choices, and users can only select one. That’s when you use radio buttons.

Usage

Use radio buttons when you want users to select only one option from a few defined, displayed choices. Common examples include choosing marital status (marrried, single) or work schedule (full-time, part-time).

radio buttons

Disabled / Default / Hover / Focus / Selected / Selected With Label

Appearance and behavior

Here are some examples of what radio buttons can look like.

  • The default view displays all available options.
  • We can add a label or instruction to guide the user to select.
  • We can disable some choices if they’re not available to that customer.
  • We can display the choices with a default option selected to encourage the customer to act.
  • The inline version displays options horizontally.
  • An asterisk at the end of the label can let users know they need to make a selection.
  • A tooltip can emphasize that users need to make a selection.

Default list

With additional label

With a disabled option

 

With a default value selected
(encouraging the user to select Radio 1)

Inline

With Required Validation

Default

With Required Message

Responsive behavior

Checkboxes and radio buttons exist across devices, just with bigger tap targets for touch inputs. Switch buttons and segmented controls remain the same as on desktop. Select menus, on the other hand, use mobile-optimized views. In these cases, tapping on the control opens a full-page modal with selections presented. Type ahead selects do the same, but provide an option to type in the modal with suggestions.

Content guidelines for radio buttons

  • Present listed choices and labels in sentence case (examples: New invoice, Select an option).
  • Use title case for proper nouns (examples: Bank of America, John Smith).
  • Avoid punctuation in the listed options.
  • Keep word count to a minimum.
  • When possible, make options verb phrases (examples: Revise invoice, Create new).
  • Be specific about what is going to happen when the user makes a selection.
  • Never write Click here. The correct verb is select. Example: Select your term.
  • Recommended voice and tone attribute: straightforward, encouraging
Launch Preview
x
px wide

Fixed

  • States: disabled, default, hover, disabled, selected, (focused coming soon)
  • Outer shape: size, stroke color and size (1 px), default, and disabled color
  • Inner shape: size, default, and hover Color
  • Padding
    • 12 px width between radio button/checkbox and label
    • 20 px height between radio button and options copy
    • 32 px height between text description and top of radio group
  • Alignment
    • Radio buttons should not indent
    • First line of text is center aligned to radio button
  • Label text
    • Avenir Next (for Intuit) Light
    • 16 px font, #6B6C72
    • Label text/entire radio button row is
      selectable as well as radio option (for
      usability)

 

 

Flexible

Web outer shape
Hover, selected, and focused colors
(must be from the One Intuit color palette)
Web inner shape
Selected and focused colors (must be
from the One Intuit color palette)
  • Was this Helpful?
  •