^{Components/Form} Switch

Best Practices

Switches in our Design System are used as an alternative to checkbox controls for turning options on or off. They are especially useful when the change takes effect immediately. The visual design of our switches makes their state clear and their use obvious.

Dos:

• Use switches for immediate action settings, not for actions that require a submission step.
• Clearly label what state the switch controls, with the effect of the toggle being obvious.
• Ensure the switch moves horizontally between states to mimic real-world behavior.
• Provide a clear distinction in color and style between the on and off states.
• Make the touch targets large enough for accessibility on touch devices.

Don’ts:

• Don’t use a switch for actions that require a save or confirm step; use checkboxes instead.
• Avoid using switches for settings that aren’t immediate or for lists of options.
• Do not place a switch in a state of ambiguity; its position should always be clear.
• Never crowd switches close together; give them ample space to avoid accidental toggling.
• Do not rely on color alone to convey the state of the switch, ensure text labels or icons are also present for clarity.