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.

jsx

<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.

Change Theme

Theme

Loading ...

Read-Only Switch

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

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Switch