Picchu

Radio button

Guidance

Radio buttons allow users to select one option from a set. 

Use radio buttons for exclusive selection in cases where the user is best served by seeing all available options side-by-side.

  • Include at least 2, but no more than 7 radio buttons in a set.
  • Each set should have a default selection.
  • Only one option may be selected at once.

Styling

  • Grab-and-go styling, based on these standards, is in the demo code and design files further below.
  • Button size: 20px X 20px
  • Stroke: 2px; (unselected=#2F2F2F; selected=#0078D7)
  • Inner Dot (selected): 10px X 10px; color=#2F2F2F
  • Label: Segoe UI, 15px, #2F2F2F
  • Disabled: button and text=#C8C8C8

Demo

See the Pen Radio Buttons Demo by Microsoft.com (@microsoft) on CodePen.

Resources