Toggle Switch
The Toggle Switch element provides an iOS-style sliding on/off control with customizable colors, sizes, and labels.
Overview
Toggle switches are a visually clear alternative to checkboxes for binary choices. The sliding animation provides immediate feedback when users change a value.
Adding a Toggle Switch
- Open the Website Builder
- Find Toggle Switch in the Elements panel (under Input)
- Drag it onto your page
- Configure the switch in the General Tab
Properties
General Tab
| Property | Description | Default |
|---|---|---|
| Label | Text label displayed alongside the switch | Toggle |
| Label Position | Where the label appears: left, right, top, bottom | left |
| Off Label | Text shown next to the switch when off | Empty |
| On Label | Text shown next to the switch when on | Empty |
| Size | Switch size: small, medium, large | medium |
| On Color | Track color when the switch is on | #22AD41 |
| Off Color | Track color when the switch is off | #cccccc |
| Default Value | Initial state: on or off | false (off) |
| Disabled | Prevent user interaction | false |
Size Reference
| Size | Track Width | Track Height |
|---|---|---|
| Small | 36px | 20px |
| Medium | 48px | 26px |
| Large | 60px | 32px |
Use Cases
- Settings pages -- enable/disable features or preferences
- Dark mode toggle -- switch between light and dark themes
- Notifications -- turn alerts on or off
- Form fields -- any binary yes/no choice where visual feedback matters
Questions?
If you have any questions, please don't hesitate to contact us.