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.

Use the same Signal anywhere the current on or off setting needs to be reflected.

dowe
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.

dowe
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.

dowe
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.

dowe
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 data

There are no records to display