Anatomy
Defining shared language for discussing the construction and structure of this component.
|
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
Disabled
Enabled
Disabled
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