https://framer.com/m/Switch-9QNmVi.js#Switch
Switch
Switch is an on/off toggle that applies immediately — no submit step in between. Track radius, thumb size, margin and shadow are props; the colours are left empty so the theme supplies them.
Examples
Live specimens for every control the component exposes.
Default
A track, a thumb and a label. The change applies the moment it is made.
State
checked and disabled are independent, so all four combinations are reachable.
checked false
checked true
disabled
on and disabled
Track and thumb
trackR and thumbR take the control from a pill to a square; thumbMargin sets how far the thumb sits inside the track.
default radii
trackR 4 · thumbR 3
thumbMargin 5
Shadow
shadow lifts the thumb off the track. Turn it off for a flatter control.
shadow true
shadow false
Label
side flips the label across the track, gap sets the distance, and fontSize picks a theme type step.
side right · gap 10
side left · gap 10
fontSize Detail · gap 16
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for Switch
The change takes effect immediately, with no save step.
The choice is genuinely binary — on or off.
It reads as a setting rather than a form field.
You want the hover, focus and disabled states handled for you.
Reach for something else
The choice needs confirming before it applies — use Checkbox in a form.
There are more than two states.
It is one option among several — use RadioGroup.
Io — UI Basics
Every switch above is a live Switch instance. Colour, type and radius resolve from the project theme tokens — the colour props are deliberately left empty.