Switch
Add an on and off toggle that swaps between two sets of content, such as showing family plans.
A switch is a toggle with two states, Off and On. Each state has its own content. Use it for "Show family plans" or a monthly and yearly toggle.
Add it
- Drag Switch from Interactive onto the phone.
- Or hover a layer in Layers, click +, then Interactive, then Switch.
It is a tabs layer named Switch with exactly two tabs, Off and On. Each tab holds a pill with the label Show family plans and the toggle. Add tab is not offered.
Where it can go
Same as Tabs: stacks, header, footer, tab content, carousel pages, but not inside tappable layers.
Design panel
Selecting the Switch layer shows the Tabs panel (Active Tab and the stack controls). Its padding starts at 16.
Select the toggle itself to get its own panel:
| Section | Control | What it does |
|---|---|---|
| Initial State | On by default | Stored with the toggle. |
| Track | On, Off | Track color in each state. Solid only. |
| Thumb | On, Off | Thumb color in each state. Solid only. |
The inspector calls it Toggle.
States
The toggle's position follows the active tab: the On tab means switched on. To change where visitors start, set Active Tab on the Switch layer to On or Off. Toggling on the canvas previews only and is not saved.
Dark mode and screen sizes
Add dark colors for the track, thumb, pill and label.
Tips and common mistakes
- Each tab has its own copy of the pill and label. Edit both, or the label changes when toggled.
- Put the content that differs in each tab with Add to this tab in Layers.
In the JSON
The component type is tabs with control.type of toggle and two tabs. The toggle is a tab_control_toggle.