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="l2">
      <Stack gap="m">
        <Switch id="disabledSwitch" label="OFF"/>
        <Switch id="disabledSwitch" label="OFF Disabled" isDisabled/>
      </Stack>
      <Stack gap="m">
        <Switch id="disabledActiveSwitch" label="ON" isActive onChange={() => {}}/>
        <Switch id="disabledActiveSwitch" label="ON Disabled" isDisabled isActive onChange={() => {}}/>
      </Stack>
    </Stack>
  

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