All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

Switch Overview

The Switch enables the user to toggle between checked and unchecked states and displays exclusive choices.

The Switch wrapper for React is a client-side wrapper for Kendo UI Switch widget.

Basic Usage

The following example demonstrates the Switch in action.

class SwitchContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <Switch />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <SwitchContainer />,
    document.querySelector('my-app')
);

Features and Functionalities

Events

The following example demonstrates basic Switch events. You can subscribe to all Switch events by the handler name.

class SwitchContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    onChange = (e) => {
        console.log("event :: change");
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <Switch change={this.onChange} />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <SwitchContainer />,
    document.querySelector('my-app')
);
In this article