Switch

<Switch> is a UI component that lets users toggle between two states.

<Switchchecked="true" />

<Switchchecked="true" />

<switch
checked={switchValue}
onCheckedChange={(args) => {
setSwitchValue(args.value)
 }}
></switch>

<switch
on:checkedChange={handleChange}
checked={switchValue()}
></switch>

<switchbind:checked={switchValue}/>

<Switchv-model="switchValue" />

Examples ​

Styling a Switch ​

<Switchchecked="true"
color="#BFCDAC"
backgroundColor="green"
offBackgroundColor="#DC493D"
/>

Props ​

checked ​

checked: boolean

Gets or sets the state switch.

Defaults to false.

offBackgroundColor ​

offBackgroundColor: Color

Gets or sets the off-state background color.

See Color.

...Inherited ​

For additional inherited properties, refer to the API Reference.

Events ​

checkedChange ​

on('checkedChange', (args:PropertyChangeData) => {
constswitch= args.object asSwitch
 console.log('Switch checked:', args.value)
})

See PropertyChangeData.

Native component ​

• Android: android.widget.Switch
• iOS: UISwitch

Contributors