<SpacedGroup direction="vertical">
    <FormControlLabel label="Not Checked" control={<Switch />} />
    <FormControlLabel label="checked" control={<Switch checked />} />
    <FormControlLabel label="Disabled" control={<Switch disabled />} />
    <FormControlLabel label="focused" control={<Switch focused />} />
  
</Playground>

{() => {
    class StateManager extends React.Component {
      constructor(props, context) {
        super(props, context)
        this.state = {
          isCheckedGlobally: false,
          isChecked: false,
        }
        this.toggle = this.toggle.bind(this)
        this.toggleGlobally = this.toggleGlobally.bind(this)
      }
      toggleGlobally() {
        this.setState(state => ({
          isCheckedGlobally: !state.isCheckedGlobally,
        }))
      }
      toggle() {
        this.setState(state => ({ isChecked: !state.isChecked }))
      }
      render() {
        return (
          <SpacedGroup direction="vertical">
            <Button onClick={this.toggleGlobally}>Set Externally
            <Switch checked={this.state.isCheckedGlobally} />
            <Switch checked={this.state.isChecked} onClick={this.toggle} />
          </SpacedGroup>
        )
      }
    }
    return <StateManager />
  }}
</Playground>

<Switch data-trackingid="enable" onClick={() => console.log('clicked')} />