Switch

    <Stack gap="s">
      <Switch id="neutralSwitch"/>
      <Switch id="activeSwitch" isActive onChange={() => {}}/>
    </Stack>
  

    <Stack gap="l">
      <Switch id="withStandardLabel" label="Label"/>
      
      <Box borderSide="all" width="min(320px, 100%)">
        <Arrange 
          gap="s" 
          columns="1fr auto"
          borderSide="bottom" 
          width="min(320px, 100%)" 
          padding="m"
        >
          <Switch.Label htmlFor="withCustomComposition">Switch.Label</Switch.Label>
          <Switch id="withCustomComposition"/>
        </Arrange>
        
        <Arrange
          gap="s" 
          columns="1fr auto"
          width="min(320px, 100%)" 
          padding="m"
        >
          <Text tag="label" htmlFor="withCustomLabel" weight="medium">Custom label</Text>
          <Switch id="withCustomLabel"/>
        </Arrange>
      </Box>
    </Stack>
  

    <Switch id="hintSwitch" label="Label" hint="Hint"/>
  

    <Stack gap="l">
      <Switch id="disabledSwitch" label="Can't switch" isDisabled/>
      <Switch id="disabledActiveSwitch" label="Can't switch" isDisabled isActive onChange={() => {}}/>
    </Stack>
  

    <Switch id="withOnChange" label="Switch me" onChange={() => alert('Switched')}/>