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.

On/Off Controls

Switches and checkboxes can be used as digital on/off controls. They prompt users to choose between two mutually exclusive options.

Show Notifications
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Specifications

Default
Inverse
Anatomy
1) Label
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 20px
bottom-margin: 0px
2) ToggleSee States below
3) Button
background-color: white
Size & Spacing
States

Off

On

Togglebackground-color: Gray 03
Togglebackground-color: Teal Dark Active

Toggle Transition:
button moves from left to right, 0.2s ease
Anatomy
1) Label
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 20px
bottom-margin: 0px
2) ToggleSee States below
3) Button
See States below
Size & Spacing
States

Off

On

Buttonbackground-color: White
Button
background-color: Teal Dark Active
Toggle
background-color: Gray 03
Toggle
background-color: White

Toggle Transition:
button moves from left to right, 0.2s ease

Implementation

Switches take immediate effect, and do no require the user to click Save or Submit to apply the new state. Switches should not be used as either/or.

Checkboxes are used when the action will not be applied immediately. Use when the action will take place with a form submission. Find specs on Checkboxes.
‍

Accessibility Options
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Save Preferences

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.

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