All docs
V21.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery Switch - Overview

The Switch is a UI component that can be in two states: "On" (when value is true) and "Off" (when value is false).

View Demo

The following code adds the Switch to your page.

jQuery
index.js
$(function() {
    $("#switchContainer").dxSwitch({
        value: true
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-switch [value]="true">
</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
App.vue
<template>
    <DxSwitch :value="true" />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxSwitch from 'devextreme-vue/switch';

export default {
    components: {
        DxSwitch
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Switch from 'devextreme-react/switch';

class App extends React.Component {
    render() {
        return (
            <Switch defaultValue={true} />
        );
    }
}
export default App;
See Also