render(
  <StackView spacing={6}>
    <StackView axis="horizontal" spacing={2}>
      {['xs', 'sm', 'md'].map((size) => (
        <ToggleSwitch
          key={size}
          label={`${size} toggle`}
          size={size}
          tooltip={`${size} toggle`}
        />
      ))}
    </StackView>
    <StackView axis="horizontal" spacing={2}>
      <ToggleSwitch isChecked label="On" tooltip="On" />
      <ToggleSwitch disabled label="Disabled, off" tooltip="Disabled, off" />
      <ToggleSwitch
        disabled
        isChecked
        label="Disabled, On"
        tooltip="Disabled, On"
      />
    </StackView>
    <StackView axis="horizontal" spacing={2}>
      <ToggleSwitch backgroundColor="red-5" isChecked label="Custom color" />
      <ThemeProvider theme={{ toggleSwitch: { backgroundColor: token('--t-fill-color-button-create-solid-default') } }}>
        <ToggleSwitch isChecked label="Theme-provided color" />
      </ThemeProvider>
    </StackView>
  </StackView>
)

function App() {
  const [isChecked, setIsChecked] = React.useState(false)
  return (
    <StackView>
      <ToggleSwitch
        isChecked={isChecked}
        label="Controlled toggle"
        onClick={() => setIsChecked(!isChecked)}
      />
    </StackView>
  )
}
render(App)