Switch
The Switch widget is a slider-style toggle that flips between two states, on and off.
Use it when someone needs to pick one of two states, like turning a setting on or off.
Definition and role
The Switch widget is a control that switches between on and off as you slide the thumb along its track. Press it and the state toggles, running the onChanged action. Configure the state, whether it's enabled, the size, the corner radius, and the thumb size, plus the track and thumb colors for each state — on, off, and disabled.
- Category: Contents
- Default size:
38 × 22(thumb (thumbSize)14, corner radius (radius)10)
Features
| Feature | Description |
|---|---|
| State toggle | Tap to toggle between on and off — this runs onChanged. |
| Enabled / disabled | enable decides whether the switch is usable. A disabled switch is drawn in its own colors. |
| Size and shape | Adjust the size (width and height), corner radius (radius), and thumb size (thumbSize). |
| Colors per state | Set the track and thumb colors separately for the on, off, and disabled (on and off) states. |
How to use
- Open the Contents category in the left widget palette.
- Drag and drop the Switch item onto the canvas.
- In the Properties panel on the right, set the initial state (
value) and the colors you want. - In
onChanged, connect the logic or script to run when the state changes.
Properties
| Property | Description | Default | Values / type |
|---|---|---|---|
value | Whether the switch is on or off | Off (false) | true / false |
enable | Whether the switch is usable (enabled) | On (true) | true / false |
Size | Switch size — a grouped property that sets width and height together | Width 38, height 22 | Size (width and height, number in px) |
thumbSize | Thumb size | 14 | Number (px, minimum 14) |
radius | Track corner radius | 10 | Number (px) |
activeTrackColor | Track color in the on state | #9483FF (purple) | Color |
activeThumbColor | Thumb color in the on state | #FFFFFF (white) | Color |
inactiveTrackColor | Track color in the off state | #94999F (gray) | Color |
inactiveThumbColor | Thumb color in the off state | #FFFFFF (white) | Color |
disabledTrackColor | Track color when disabled (off) | #9F9F9F | Color |
disabledThumbColor | Thumb color when disabled (off) | #737373 | Color |
disabledActiveTrackColor | Track color when disabled (on) | #9F9F9F | Color |
disabledActiveThumbColor | Thumb color when disabled (on) | #6750A4 | Color |
Notes and tips
Set the on and off colors with activeTrackColor and inactiveTrackColor, and the disabled colors with the disabled... properties.
thumbSize (the thumb size) has a minimum of 14. Adjust it together with the track height (height) so the thumb fits.
Learn more
For the complete Widget Control (Property, Method, and Event) reference for scripting this widget, see Switch Widget Control.