8.7 released—WinterCG Compliance Part 1
Learn more

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

xml
<Switch checked="true" />

Examples

Styling a Switch

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

Props

checked

ts
checked: boolean

Gets or sets the state switch.

Defaults to false.

offBackgroundColor

ts
offBackgroundColor: Color

Gets or sets the off-state background color.

See Color.

...Inherited

For additional inherited properties, refer to the API Reference.

Events

checkedChange

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

See PropertyChangeData.

Native component

Previous
Slider