🤖 Create a chatbot for your NativeScript app! Learn more at our upcoming 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>
// 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="">
*/

// adding the created element to already existing layout
stackLayout.addChild(mySwitch);
// 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="">
*/

// Adding the created element to already existing layout
stackLayout.addChild(mySwitch);

Improve this document

Demo Source


Styling

The styling properties for the Swtich control are as follows:

  • color- Controls the handle color
  • bacxkgroundColor(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"
                checked="{{ firstSwitch }}"/>
<!-- Srtyling via CSS class  (refer to the CSS file) -->
<Switch  class="m-15 secondSwitchStyle" checked="{{ secondSwitch }}"/>

<!-- Styling colors & opacity via CSS class (refer to the CSS file) -->
<Switch class="m-15 thirdSwitchStyle" checked="{{ thirdSwitch }}"    />
.secondSwitchStyle{
    color: yellow;
    background-color: green;
    off-background-color: red;
}

.thirdSwitchStyle{
    opacity: 0.8;
    color: darkblue;
    background-color: lightseagreen;
    off-background-color: orangered;
}

Improve this document

Demo Source


API Reference for the Switch Class

Native Component

Android iOS
android.widget.Switch UISwitch