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

<<< @/../examples/typescript/src/ui/Switch/template.xml#example

<<< @/../examples/angular/src/ui/Switch/component.html#example

<<< @/../examples/react/src/components/ui/switch.tsx#example

<<< @/../examples/solid/src/ui/switch.tsx#example

<<< @/../examples/svelte/app/components/ui/Switch.svelte#example

<<< @/../examples/vue/src/ui/Switch/component.vue#example

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

checked: boolean

Gets or sets the state switch.

Defaults to false.

offBackgroundColor: Color

Gets or sets the off-state background color.

See Color.

For additional inherited properties, refer to the API Reference.

on('checkedChange', (args: PropertyChangeData) => {
  const switch = args.object as Switch
  console.log('Switch checked:', switch.checked)
})

See PropertyChangeData.

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