Controlled Mode

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Read-Only Switch

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

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?