Use the same Signal anywhere the current on or off setting needs to be reflected.
FORM
Toggle
Toggles let people turn one independent setting on or off with a compact, familiar switch.
PLAYGROUND
Bind one boolean setting
bind connects Toggle to a boolean Signal. Changing the switch writes the new value without executing user JavaScript.
signal notificationsEnabled value:true
Toggle bind:notificationsEnabled label:"Release notifications" name:"release-notifications" scheme:"primary"SCHEMES
Every semantic family
The active track and thumb use the selected scheme while the off state remains neutral and legible.
Toggle checked:true label:"Primary" scheme:"primary"
Toggle checked:true label:"Success" scheme:"success"
Toggle checked:true label:"Danger" scheme:"danger"SIDE LABELS
Make both states clear
labelLeft appears before the switch and labelRight after it. The active side stays emphasized as the boolean value changes.
Toggle checked:false labelLeft:"Off" labelRight:"On" label:"Email alerts" scheme:"primary"
Toggle checked:true labelLeft:"Private" labelRight:"Public" label:"Profile visibility" scheme:"success"STATES
On, off, and unavailable
Use checked for a fixed initial state. disabled keeps the value visible while preventing interaction.
Toggle checked:true label:"Enabled and on" scheme:"success"
Toggle checked:false label:"Enabled and off" scheme:"primary"
Toggle checked:true disabled:true label:"Disabled and on" scheme:"muted"
Toggle checked:false disabled:true label:"Disabled and off" scheme:"muted"BEHAVIOR
One boolean contract, every target
Dowe lowers the same boolean switch to web, iOS, and Android, keeping labels, scheme, state, and disabled behavior aligned.
BINDING
Boolean only
bind accepts a bool Signal path and writes true or false when the user changes the switch.
STATE CONTEXT
Labels on both sides
label, labelLeft, and labelRight explain the setting and both of its available states.
TARGETS
Portable switch
Web, SwiftUI, and Compose render the same checked, unchecked, and disabled model.
API
Props
Toggle also accepts the applicable common spacing, sizing, font, visibility, accessibility, and shadow props.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||