Toggle/Switch

null

Anatomy

Defining shared language for discussing the construction and structure of this component.

null

Key

Category

Parts

1

Shape, Thumb

Background color, border radius

2

Shape, Track

Border radius, border color

3

Shape, Track

Background color, padding (block [top, bottom], inline [left, right])

Usage

Figma library (internal only)

Reference HIG for general guidance when designing for iOS.

Variants

Acorn offers 1 iOS toggle variant in 1 size, with 2 states across 2 modes (themes).

Sizes

States

An iOS toggle can be on or off, this is a binary switch state applied to the overall component. In addition, iOS toggles have 2 interactive states that affect the visual output.

Available interactive states: Enabled, and disabled

The disabled state has an important caveat that applies across modes.

Disabled

Disabled visual styles should only be applied when a toggle is disabled.

Disabled toggles are unusable. Disable a toggle to keep users from interacting with the toggle until conditions are met.

Toggle only

Figma component (internal only)

Currently known as "Switch" in our Figma library file.

Examples

Enabled

null

Disabled

null

Enabled

null

Disabled

null

Behavior and interaction

Reference HIG for general guidance when designing for iOS.

Writing guidelines

Follow Apple Human Interface Guidelines, which uses headline-style capitalization. Capitalize every word except articles, coordinating conjunctions, and prepositions of four or fewer letters.

See capitalization for more guidance.

Localization