ToggleSwitch

<Box display="flex" maxWidth="300px">
  <Box flexGrow={1} fontSize={2} fontWeight="bold" id="switchLabel">
    Notifications
  </Box>
  <ToggleSwitch aria-labelledby="switchLabel" />
</Box>

<Box display="flex" maxWidth="300px">
  <Box flexGrow={1} fontSize={2} fontWeight="bold" id="switchLabel">
    Notifications
  </Box>
  <ToggleSwitch defaultChecked aria-labelledby="switchLabel" />
</Box>

const Controlled = () => {
  const [isOn, setIsOn] = React.useState(false)

  const onClick = () => {
    setIsOn(!isOn)
  }

  const handleSwitchChange = on => {
    console.log(`new switch "on" state: ${on}`)
  }

  return (
    <>
      <Box display="flex" maxWidth="300px">
        <Box flexGrow={1} fontSize={2} fontWeight="bold" id="switchLabel">
          Notifications
        </Box>
        <ToggleSwitch onClick={onClick} onChange={handleSwitchChange} checked={isOn} aria-labelledby="switchLabel" />
      </Box>
      <p>The switch is {isOn ? 'on' : 'off'}</p>
    </>
  )
}

render(Controlled)

<Box display="flex" maxWidth="300px">
  <Box flexGrow={1} fontSize={1} fontWeight="bold" id="switchLabel">
    Notifications
  </Box>
  <ToggleSwitch aria-labelledby="switchLabel" size="small" />
</Box>

const LoadingToggle = () => {
  const [loading, setLoading] = React.useState(false)
  const [isOn, setIsOn] = React.useState(false)

  async function switchSlowly(currentOn) {
    await new Promise(resolve => setTimeout(resolve, 1500))
    return await !currentOn
  }

  async function onClick() {
    setLoading(!loading)
    const newSwitchState = await switchSlowly(isOn)
    setIsOn(newSwitchState)
  }

  const handleSwitchChange = React.useCallback(
    on => {
      setLoading(false)
    },
    [setLoading],
  )

  return (
    <>
      <Box display="flex" maxWidth="300px">
        <Box flexGrow={1} fontSize={2} fontWeight="bold" id="switchLabel">
          Notifications
        </Box>
        <ToggleSwitch
          aria-labelledby="switchLabel"
          loading={loading}
          checked={isOn}
          onClick={onClick}
          onChange={handleSwitchChange}
        />
      </Box>
      <p>The switch is {isOn ? 'on' : 'off'}</p>
    </>
  )
}

render(LoadingToggle)

<Box display="flex" maxWidth="300px">
  <Box flexGrow={1} fontSize={2} fontWeight="bold" id="switchLabel">
    Notifications
  </Box>
  <ToggleSwitch aria-labelledby="switchLabel" disabled />
</Box>

<Box display="flex">
  <Box flexGrow={1}>
    <Text fontSize={2} fontWeight="bold" id="switchLabel" display="block">
      Notifications
    </Text>
    <Text color="fg.subtle" fontSize={1} id="switchCaption" display="block">
      Notifications will be delivered via email and the GitHub notification center
    </Text>
  </Box>
  <ToggleSwitch aria-labelledby="switchLabel" aria-describedby="switchCaption" />
</Box>

<>
  <Text fontSize={2} fontWeight="bold" id="switchLabel" display="block" mb={1}>
    Notifications
  </Text>
  <ToggleSwitch statusLabelPosition="end" aria-labelledby="switchLabel" />
</>