React Switch - Getting Started

jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The Switch component allows users to switch between ON (the value is true) and OFF (the value is false) states.

This tutorial shows how to add Switch to a page and configure its core features. The following sample shows the customization result:

Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: getting-started-with-switch.

Create a Switch

jQuery

Add DevExtreme to your jQuery application and use the following code to create a Switch component:

index.js
index.html
$(function() {
    $("#switch").dxSwitch({ });
});
<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.14/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/22.1.14/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div id="switch"></div>
    </body>
</html>
Angular

Add DevExtreme to your Angular application and use the following code to create a Switch component:

app.component.html
app.component.ts
app.module.ts
<dx-switch></dx-switch>
import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {

}
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";

import { DxSwitchModule } from "devextreme-angular";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSwitchModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue

Add DevExtreme to your Vue application and use the following code to create a Switch component:

App.vue
<template>
    <DxSwitch>
    </DxSwitch>
</template>

<script>
import "devextreme/dist/css/dx.light.css";
import { DxSwitch } from "devextreme-vue/switch";

export default {
    components: {
        DxSwitch
    }
}
</script>
React

Add DevExtreme to your React application and use the following code to create a Switch component:

App.js
import React from "react";
import "devextreme/dist/css/dx.light.css";
import { Switch } from "devextreme-react/switch";

function App() {
    return (
        <Switch>
        </Switch>
    );
}

export default App;

Specify the Initial State

If you need to specify the initial state, assign a Boolean value to the value property. You can also change the Switch component labels. Use the switchedOnText and the switchedOffText properties.

jQuery
index.js
$(function() {
    $("#switch").dxSwitch({
        value: false,
    });
});
Angular
app.component.html
<dx-switch
    [value]="false"
>
</dx-switch>
Vue
App.vue
<template>
    <DxSwitch
        :value="false"
    />
</template>

<script>
// ...
</script>
React
App.js
// ...

function App() {
    // ...
    return (
        <Switch
            value={false}
        />
    );
}

export default App;

Configure Size

The component allows you to change its width.

You can also use rtlEnabled property to enable the Right-to-Left layout.

jQuery
index.js
$(function() {
    $("#switch").dxSwitch({
        // ...
        width: 80,
        rtlEnabled: true,
    });
});
Angular
app.component.html
<dx-switch ...
    [width]="80"
    [rtlEnabled]="true"
>
</dx-switch>
Vue
App.vue
<template>
    <DxSwitch ...
        :width="80"
        :rtlEnabled="true"
    />
</template>

<script>
// ...
</script>
React
App.js
// ...

function App() {
    // ...
    return (
        <Switch ...
            width={80}
            rtlEnabled={true}
        />
    );
}

export default App;

Define a Hint

The following code specifies the hint that appears when users hover the mouse pointer over the Switch.

jQuery
index.js
$(function() {
    $("#switch").dxSwitch({
        // ...
        hint: "Click to switch on",
        onValueChanged(e) {
            const messageText= e.value ? "Click to switch off" : "Click to switch on";
            e.component.option("hint", messageText);
            // ...
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-switch ...
    [hint]="hintMessage"
    (onValueChanged)="onValueChanged($event)"
>
</dx-switch>
import { Component } from "@angular/core";
// ...

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})

export class AppComponent {
    hintMessage: string = "Click to switch on";
    onValueChanged(e: {value: boolean}) {
        this.hintMessage = e.value ? "Click to switch off" : "Click to switch on";
        // ...
    }
}
Vue
App.vue
<template>
    <DxSwitch ...
        :hint="hintMessage"
        @value-changed="onValueChanged"
    />
</template>

<script>
import { DxSwitch } from "devextreme-vue/switch";
// ...

export default {
    components: {
        DxSwitch
    },
    data() {
        return {
            hintMessage: "Click to switch on",
        };
    },
    methods: {
        onValueChanged(e) {
            this.hintMessage = e.value ? "Click to switch off" : "Click to switch on";
            // ...
        }
    }
}
</script>
React
App.js
import React, { useState, useCallback } from "react";
import "devextreme/dist/css/dx.light.css";

import { Switch } from "devextreme-react/switch";

function App() {
    const [hintMessage, setHintMessage] = useState("Click to switch on");

    const onValueChanged = useCallback((e) => {
        const messageText = e.value ? "Click to switch off" : "Click to switch on";
        setHintMessage(messageText);
        // ...
    }, []);

    return (
        <Switch ...
            hint={hintMessage}
            onValueChanged={onValueChanged}
        />
    );
}

export default App;

Handle Value Change

Users can change a component value (state) with a mouse click, SPACE key, or tap. Implement the onValueChanged callback to handle value changes.

The following code displays a notification every time users change the Switch state:

jQuery
index.js
$(function() {
    $("#switch").dxSwitch({
        // ...
        onValueChanged(e) {
            // ...
            const stateLabel = e.value ? "ON" : "OFF";
            DevExpress.ui.notify(`The component is switched ${stateLabel}`); 
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-switch ...
    (onValueChanged)="onValueChanged($event)"
>
</dx-switch>
import { Component } from "@angular/core";
import notify from "devextreme/ui/notify";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})

export class AppComponent {
    // ...
    onValueChanged(e: {value: boolean}) {
        // ...
        const stateLabel = e.value ? "ON" : "OFF";
        notify(`The component is switched ${stateLabel}`); 
    }
}
Vue
App.vue
<template>
    <DxSwitch ...
        @value-changed="onValueChanged"
    />
</template>

<script>
// ...
import { DxSwitch } from "devextreme-vue/switch";
import notify from "devextreme/ui/notify";

export default {
    components: {
        DxSwitch
    },
    // ...
    methods: {
        onValueChanged(e) {
            // ...
            const stateLabel = e.value ? "ON" : "OFF";
            notify(`The component is switched ${stateLabel}`);
        }
    }
}
</script>
React
App.js
import React, { useState, useCallback } from "react";
import "devextreme/dist/css/dx.light.css";

import { Switch } from "devextreme-react/switch";
import notify from "devextreme/ui/notify";

function App() {
    // ...
    const onValueChanged = useCallback((e) => {
        // ...
        const stateLabel = e.value ? "ON" : "OFF";
        notify(`The component is switched ${stateLabel}`); 
    }, []);

    return (
        <Switch ...
            onValueChanged={onValueChanged}
        />
    );
}

export default App;