Controlled Switch

By default, the Switch is in an uncontrolled state.

To manage the state of the Switch, use its checked property, handle the onChange event, and pass the new value through the props.

<Switch
    onChange={(event) => { this.setState({checked: event.target.value}) }}
    checked={this.state.checked}
/>

Manual Switch Toggle

The following example demonstrates how to manually toggle the Switch.

class App extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            checked: true
        }
    }
    handleChange = (event) => {
        console.log(event.target.value);
        // Logs the current checked state of the Switch.
    }
    toggleSwitch = () => {
        this.setState({ checked: !this.state.checked });
    }
    render() {
        return(
            <div className="row">
                <div className="col-md-3">
                    <button className="k-button" onClick={this.toggleSwitch}>Toggle</button>
                </div>
                <div className="col-md-3">
                    <Switch onChange={this.handleChange} checked={this.state.checked}/>
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Read-Only Switch

The following example demonstrates how to implement a read-only Switch.

class App extends React.Component {
    render() {
        return(
            <Switch checked={true}/>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /