Switch

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

The default state is false or OFF.


Examples

Example: Simple Switch

  • Angular

  • Plain

  • React

  • Vue

  • Svelte

  • HTML

  • TypeScript

<Switch checked="true" (checkedChange)="onCheckedChange($event)"> </Switch>
import { Component } from '@angular/core'
import { EventData, Switch } from '@nativescript/core'

@Component({
  moduleId: module.id,
  templateUrl: './usage.component.html'
})
export class BasicSwitchComponent {
  onCheckedChange(args: EventData) {
    const sw = args.object as Switch
    const isChecked = sw.checked // boolean
  }
}
  • XML

  • TypeScript

<Switch checked="true" loaded="onSwitchLoaded" />
import { Switch } from '@nativescript/core'

export function onSwitchLoaded(argsloaded) {
  const mySwitch = argsloaded.object as Switch
  mySwitch.on('checkedChange', args => {
    const sw = args.object as Switch
    const isChecked = sw.checked
    console.log(`Switch new value ${isChecked}`)
  })
}
<switch checked={true} />
<Switch checked="true" />

<Switch>provides two-way data binding using v-model.

<Switch v-model="itemEnabled" />
<switch checked="{true}" on:checkedChange="{onCheckedChange}" />

<switch>provides two-way data binding for checked.

<switch bind:checked="{switchEnabled}" />

Props

Name Type Description

checked

Boolean

Gets or sets the value of the switch selection. + Default value: false.

...Inherited

Inherited

Additional inherited properties are not shown. Refer to the API Reference

Events

Name Description

checkedChange

Emitted when the switch selection changes.

Native component