Checkbox

    <Stack gap="s">
      <Checkbox id="neutralCheckbox"/>
      <Checkbox id="checkedCheckbox" isChecked onChange={() => {}}/>
    </Stack>
  

    <Checkbox id="indeterminateCheckbox" isIndeterminate/>
  

    <Stack gap="l">
      <Checkbox id="withStandardLabel" label="Label"/>
      
      <Box borderSide="all" width="min(320px, 100%)">
        <Arrange
          gap="s" 
          justifyContent="space-between" 
          borderSide="bottom" 
          width="min(320px, 100%)" 
          padding="m"
        >
          <Checkbox id="withCustomComposition"/>
          <Checkbox.Label htmlFor="withCustomComposition">Checkbox.Label</Checkbox.Label>
        </Arrange>
        
        <Arrange
          gap="s" 
          justifyContent="space-between" 
          width="min(320px, 100%)" 
          padding="m"
        >
          <Checkbox id="withCustomLabel"/>
          <Text tag="label" htmlFor="withCustomLabel">Custom label</Text>
        </Arrange>
      </Box>
    </Stack>
  

    <Checkbox label="Label" hint="Hint" id="hintCheckbox"/>
  

    <Stack gap="l">
      <Checkbox id="disabledCheckbox" label="Can't check" isDisabled/>
      <Checkbox id="disabledCheckedCheckbox" label="Can't check" isDisabled isChecked onChange={() => {}}/>
    </Stack>
  

    <Checkbox id="withOnChange" label="Check me" onChange={() => alert('Checked')}/>