📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

Switch

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. Another useful feature of the component is the isEnable property, which gives the functionality to make the component inactive.

const switchModule = require("tns-core-modules/ui/switch");
import { Switch } from "tns-core-modules/ui/switch";

Basics

The Switch widget provides the checked and the isEnabled boolean properties.

<Switch checked="true" isEnabled="true" id="my-switch"/>

To track for the checkedChange event, you will need a reference through the code-behind file.

// set up the initial values for the switch components
const mySwitch = page.getViewById("my-switch");
mySwitch.on("checkedChange", (args) => {
    console.log("checkedChange ", args.object.checked);
});
// set up the initial values for the switch components
const mySwitch: Switch = <Switch>page.getViewById("my-switch");
mySwitch.on("checkedChange", (swargs) => {
    console.log("checkedChange ", (<Switch>swargs.object).checked);
});

Improve this document

Demo Source


Code Behind

The following example shows how to create a Switch widget via the code-behind file.

<!-- The Layout that will hold the dynamically created Switch -->
<StackLayout id="stackLayoutId" class="m-15 text-center" width="80%" height="80%">
      <Label text="{{ 'Result: ' + swResult}}" textWrap="true" class="h2"/>
</StackLayout>
function onPageLoaded(args) {
    const page = args.object;
    const stackLayout = page.getViewById("stackLayoutId");
    // creating new Switch and binding the checked property
    const mySwitch = new switchModule.Switch();
    const options = {
        sourceProperty: "isChecked",
        targetProperty: "checked"
    };
    mySwitch.bind(options, vm);
    mySwitch.on("checkedChange", (args) => {
        console.log(args.object.checked);
    });

    // setting up mySwitch.checked to true via binding
    vm.set("isChecked", true);

    // The above code is equivalent to binding via the XML
    /*
        <Switch checked="">
    */

    stackLayout.addChild(mySwitch);
    page.bindingContext = vm;
}
exports.onPageLoaded = onPageLoaded;
export function onPageLoaded(args) {
    const page: Page = <Page>args.object;
    const stackLayout: StackLayout = <StackLayout>page.getViewById("stackLayoutId");
    // creating new Switch and binding the checked property
    const mySwitch = new Switch();
    const options = {
        sourceProperty: "isChecked",
        targetProperty: "checked"
    };
    mySwitch.bind(options, vm);
    mySwitch.on("checkedChange", (swargs) => {
        console.log((<Switch>swargs.object).checked);
    });

    // setting up mySwitch.checked to true via binding
    vm.set("isChecked", true);

    // The above code is equivalent to binding via the XML
    /*
        <Switch checked="">
    */

    stackLayout.addChild(mySwitch);
    page.bindingContext = vm;
}

Improve this document

Demo Source


Styling

This example shows how to bind TextField text, hint and secure properties as well as how to handle the text change.

<GridLayout rows="auto auto auto" columns="* auto" class="m-5">
    <Label class="h3 m-15" text="{{ firstSwitchResult }}" textWrap="true" row="0" col="0"/>
    <Switch  class="m-15 firstSwitchStyle" checked="{{ firstSwitch }}"    row="0" col="1"/>
    <Label class="h3 m-15" text="{{ secondSwitchResult }}" textWrap="true" row="1" col="0"/>
    <Switch  class="m-15 secondSwitchStyle" checked="{{ secondSwitch }}" row="1" col="1"/>
    <Label class="h3 m-15" text="{{ thirdSwitchResult }}" textWrap="true" row="2" col="0"/>
    <Switch class="m-15 thirdSwitchStyle" checked="{{ thirdSwitch }}"    row="2" col="1"/>
</GridLayout>
.firstSwitchStyle{
    background-color: #FFFF66;
}

.secondSwitchStyle{
    background-color: #CCFFFF;
}

.thirdSwitchStyle{
    opacity: 0.5;
    background-color: #8C489F;
}

Improve this document

Demo Source


API Reference for the Switch Class

Native Component

Android iOS
android.widget.Switch UISwitch