This environment is not optimized for viewing on small or mobile devices. Please view on a larger browser for the best experience.

If you have any questions, please contact us.

Radio Buttons

Radio buttons should be used when only one selection can be made, and the user needs to see all options before answering. If there are more than seven options, use a select menu instead.

What's your favorite type of squash?
About
Overview
Our Formula
Aon experience
how it works
AccessibilityWhat is Accessibility?Digital Design SystemAccessibility and AonAssistive TechnologyAccessibility & color
Feature Request
Give Feedback
UpdatesVersion 2.4Version 2.3Version 2.2Version 2.1Version 2.0Version 1.3Version 1.2Version 1.1Version 1.0
Foundations
Color
icon libraryActionscontrolsnavigationfeedbackcommunicationsview settingsfilesmiscellaneous
Layout12 column gridBreakpoints
spacinglocal spacingglobal spacing
TypographyHeadlinesparagraphsLink Styling
Components
Core Components
alertsBanner AlertsContextual Alerts
buttonsspecificationsimplementation
filter chipsspecificationsimplementation
on/off controlsspecificationsimplementation
form elements
introductionBest PracticesImplementation
checkboxes
radio buttons
selects
text area
text inputsspecificationsimplementation
Modules
navigation
in-page navigation
HeaderHeader BarNavigation Menus
footerBasic footerRobust Footer
progress bars
TabsHorizontal TabsButton Tabsvertical Tabs
Rail Navigation
overlays
modalsSpecificationsStyles
PopoversStandard PopoverAction Menus
tooltipsInfo TextLabel HoverData VisualizationTooltip Implementation
content containers
cardsSmall CardsLarge cards
expansion panelsspecificationsStyle variationsfunctionality
other
TablesSpecificationsImplementation
Templates
dashboard
forms
processes
standard
Data Visualization
foundations
best practices
colorCategoricalValueperformancebackgroundspecifications
data snapshotsspecificationsPage Layouts
global elementsGrid ElementsLegend ChipsTooltips
typography
chart types
Use Cases
Area chartsingle Area ChartStacked Area Chart100% stacked ChartSpecifications
bar chartsingle Bar ChartsGrouped Bar ChartsStacked Bar Charts100% stacked ChartsSpecifications
circular chartPieDonutSemi-circleSpecifications
line chartSingle Line ChartMultiple Line ChartSpecifications
scatter plotTypesImplementation Specifications

Specifications

Default
Inverse
Anatomy
1) Title
font-face: Helvetica Now Text
font-weight: 700
font-size: 16px
line-height: 20px
bottom-margin: 4px
color: Gray 01
‍
Title Mobile
font-size: 14px
line-height: 18px
bottom-margin: 0px
2) Radio Button
background-color: none
border: 1px solid
border-color: Gray 01
3) Inner Circle
See Selected state below
4) Label
font-face: Helvetica Now Text
font-weight: 700
font-size: 16px
line-height: 20px
bottom-margin: 4px
color: Gray 01
‍
Label Mobile
‍font-size: 14px
line-height: 18px
5) Description (optional)
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 20px
bottom-margin: 4px
color: Gray 02
‍
Description Mobile
‍font-size: 14px
line-height: 18px
6) Information Icon (optional)
font-face: Font Awesome 6 Pro Light
font-size: 18px
line-height: 18px
color: Gray 02
code: info-circle (f05a)
Size & Spacing

Radio Button

Radio Group

Radio Group with Description

Radio Group with Error

States

Default

Hover

Selected

Unselected

Button
border: 1px
border-color: Gray 01
Button
border: 2px
border-color: Teal Dark Hover
Button
background-color: Teal Dark Active
border: none
‍
Selected Button Transition:
border: grows thicker, 0.2s ease
opacity: 50%


‍
Inner Circle
border: 2px
border-color: Gray 06

Inner Circle Transition:
background-color: Transparent to Teal Dark Active, 0.2s ease
Error States

Default

Hover

Selected

Group

Title
Button
border-color: Error Dark
Button
border: 2px solid
border-color: Error Dark
Button
background-color: Error Dark
border: none

Selected Button Transition:
border: grows thicker, 0.2s ease
Title
color: Error Dark
Inner Circle
border: 2px
border-color: Gray 06

Inner Circle Transition:
background-color: Transparent to Error Dark, 0.2s ease
Anatomy
1) Title
font-face: Helvetica Now Text
font-weight: 700
font-size: 16px
line-height: 20px
bottom-margin: 4px
color: Gray 06

Title Mobile
‍font-size: 14px
line-height: 18px
bottom-margin: 0px
2) Radio Button
background-color: none
border: 1px solid
border-color: Gray 06
3) Inner Circle
See Selected state below
4) Label
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 20px
bottom-margin: 0px
color: Gray 06

Label Mobile
‍font-size: 14px
line-height: 18px
5) Description (optional)
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 20px
bottom-margin: 4px
color: Gray 04
‍
Description Mobile
‍font-size: 14px
line-height: 18px
bottom-margin: 0px
6) Information Icon (optional)
font-face: Font Awesome 6 Pro Light
font-size: 18px
line-height: 18px
color: Gray 04
code: info-circle (f05a)
Size & Spacing

Radio Button

Radio Group

Radio Group with Description

Radio Group with Error

States

Default

Label

Hover

Label

Selected

Label

Unselected

Label
Button
border: 1px
border-color: Gray 06
Button
border: 2px
border-color: Gray 06
Button
background-color: Gray 06
border: none

Selected Button Transition:
border: grows thicker, 0.2s ease
opacity: 50%

‍
Inner Circle
border: 2px
border-color: Navy

Inner Circle Transition:
background-color: Transparent to Gray 06, 0.2s ease
Error States

Default

Hover

Selected

Group

Title:
Button
border-color: Error Inverse
Button
border: 2px solid
border-color: Error Inverse
Button
background-color: Error Inverse
border: none
‍
Selected Button Transition:
border: grows thicker, 0.2s ease
Title
color: Error Inverse
Inner Circle
border: 2px
border-color: Error Inverse

Inner Circle Transition:
background-color: Transparent to Error Inverse, 0.2s ease

Aon Consumer Experience & Design Group
‍
200 E. Randolph St.
5th Floor
Chicago, IL 60601

global.design@aon.com‍

AboutFoundationsComponentsModulesData Visualization

For best results, please view on Desktop in Chrome or Firefox.