NativeScript Angular


The Switch component allows users to toggle a control between two states. The default state of the component is off, or false, however you can change the state by setting the checked property to a boolean value. To handle the state change event you can use the checkedChange property, which notifies the app when the value has changed.



<Switch checked="true" (checkedChange)="onCheckedChange($event)"></Switch>
import { Component } from "@angular/core";
import { EventData } from "tns-core-modules/data/observable";
import { Switch } from "tns-core-modules/ui/switch";

    templateUrl: "./usage.component.html"
export class BasicSwitchComponent {

    onCheckedChange(args: EventData) {
        let sw = args.object as Switch;
        let isChecked = sw.checked; // boolean

Improve this document

Demo Source


The styling properties for the Swtich control are as follows:

  • color- Controls the handle color
  • backgroundColor(background-color in CSS) - Controls the background color while the switch is in ON state.
    • offBackgroundColor (off-background-color in CSS) - Controls the background color while the switch is in OFF state.
<!-- Styling via inline properties -->
<Switch color="yellow" backgroundColor="green" offBackgroundColor="red">

Note: When using @nativescript/theme the default style will be set according to the used theme (no need to set additional CSS classes).

Improve this document

Demo Source


Name Type Description
checked boolean Gets or sets if a switch is checked or not.
offBackgroundColor Color Gets or sets the off-state color.

API References

Name Type
tns-core-modules/ui/switch Module
Switch Class

Native Component

Android iOS
android.widget.Switch UISwitch