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.
- 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