Anatomy elements
#	Element	Description
1	Container	Wraps the label, input, and assistive text.
2	Label	Describes what feature or setting the Toggle controls.
3	Track	Holds the thumb and indicates the current state through its background color.
4	Thumb	Slides between the off and on positions within the track.
5	Assistive text	Displays description or error text to aid the user.

Toggles and Checkboxes are both form controls that give the user the option to enable or disable a setting or feature. However, it's important to understand the difference between the two as they are not interchangeable:

Toggles function similarly to real-world on/off switches. Form submission is not required; the setting takes effect immediately.
Checkboxes allow users to select zero or more options independently to submit to a form. Deselection is allowed.

Best practices

Default state

Set Toggles to the default state that is safest or most common for the user. Avoid enabling destructive or data-sharing settings by default.

Share usage data

Do: Default to the safest or most expected option.

Share usage data

Don't: Enable a potentially sensitive setting by default without explicit user intent.

Appearance

Sizes

Toggles are available in three sizes: medium, small, and extra small. Use the size most appropriate to the given layout constraints.

Medium Toggle

Medium

Medium is the default size, used in the majority of contexts including settings pages and form layouts.

Small Toggle

Small

Small Toggles are used in tighter layouts such as table rows, inline controls, or condensed settings panels.

Extra small Toggle

Extra small

Extra small Toggles are used in the most space-constrained contexts.

Behaviors

States

Unchecked

Checked

Base

The default unchecked and checked states. The unchecked track uses a neutral surface color, while the checked track uses the active accent color.

Unchecked

Checked

Hover

On mouse hover, the track background darkens to indicate interactivity.

Unchecked

Checked

Focus

On keyboard focus, the track receives the standard 2px focus ring.

Unchecked

Checked

Disabled

Disabled Toggles cannot be interacted with. The track drops its accent color, but a disabled checked Toggle keeps a stronger fill than a disabled unchecked one so its state stays readable.

Truncation

Labels are truncated with an ellipsis by default when they overflow the available space. Truncation can be disabled to allow the label to wrap to multiple lines. Be mindful as truncated text may be harder to read.

Automatically archive campaigns that have been inactive for 90 days

Truncated

By default, long labels are clipped with an ellipsis.

Automatically archive campaigns that have been inactive for 90 days

Wrapping

When truncation is disabled, the label wraps to multiple lines.

Content

Labels

When writing labels, it's best to phrase them in a way that makes it clear what will happen when the Toggle is turned on, not what is prevented when it's turned off. Labels should be self-explanatory without relying on surrounding context.

Show external avatars

Do: Frame the label positively so the enabled state matches the action described.

Hide external avatars

Don't: Use negative phrasing that creates a confusing double-negative when the Toggle is off.

Assistive text

Description

Descriptions provide extra context when the label alone doesn't fully explain the Toggle's effect. Keep descriptions to a short phrase without end punctuation.

Auto-archive

Do: Add context that explains what happens when the setting is enabled.

Auto-archive

Don't: Restate the label without adding new information.

Error

Error messages communicate validation issues with the Toggle. Frame errors as an actionable step the user can take to resolve the issue.

SSL connection

Do: Inform the user of the issue and how they can solve it.

Toggle

Anatomy

Guidelines

Toggle vs. Checkbox

Best practices

Default state

Appearance

Sizes

Behaviors

States

Truncation

Content

Labels

Assistive text

Description

Error

On this page