Switch (design)

A Switch is used to immediately enable or disable the state of an action. These two actions should be simple to understand and represent an opposite meaning (E.g. 'On' & 'Off'). They are the preferred way to adjust settings on mobile.

The switch's states are saved immediately on click. Just like a light switch: flipping the switch turns the light directly on or off, which differs from a radio group in that a radio's action is initiated from a form submit button.

Label text

All switches should always have an associated label that clearly describes the on state of the control. Avoid writing labels that includes the text "on" and "off".

An inline helper message can be added to aid in use.

Both the label and the helper text styles (font-family, font size, font-weight, color) are customizable for specific use cases. Check Chameleon's Typographic System for possibilities and guidelines.

Cross platform

Design conventions differ from platform to platform. These differences in convention can affect the user's ability to understand the UI or complete certain tasks. In such cases, it’s recommended to adapt to platform-specific conventions.

Native platform switches should be used as they have matching functionality.