Switch

Usage

A switch turns a single setting on or off and applies the change right away. Use it for settings that take effect immediately, with a label that names what the switch controls rather than its current state.

Design properties

Types

Default

Use it within the List component so labels, spacing, and touch targets stay consistent.

Behavior and interaction

Behavior

• Touching the switch or its label flips it, and the change takes effect right away.
• Five states are designed: enabled, hovered, focused, pressed, and disabled.
• The thumb moves between positions to show which side is active, so color is not the only signal.
• A switch never needs a confirmation step. If the change needs confirming, it isn’t a switch.

Positioning

• Use the List component so label spacing and touch targets match other list rows.
• Keep the touch target at least 48×48dp, including the label.
• Place the switch at the trailing edge of its row, with the label leading.

Writing guidelines

Due to such limited space, keep label strings to 1-2 words and use a description if you need to provide additional details.

The switch itself already implies a binary “on” / “off” action, so labels should align with that action. The following best practices apply to copy for switches:

• Stay concise, keep labels to 1-2 words
• Labels should indicate the name of the feature, with the understanding that it turns on and off (Unless there is particular confusion, the label shouldn’t need an action verb).
• Descriptions should include action verbs that indicate the change that will happen when toggled.

Related components

Changelog