Checkbox

<Stack direction='row' spacing={6} align='center'>
  <Checkbox defaultIsChecked>HRM</Checkbox>
  <Checkbox defaultIsChecked colorScheme='hue-chrome'>Payroll</Checkbox>
  <Checkbox defaultIsChecked colorScheme='teal'>Payouts</Checkbox>
  <Checkbox defaultIsChecked colorScheme='pink' spacing="2rem">Time & Attendance</Checkbox>
</Stack>

<Checkbox isInvalid>Checkbox</Checkbox>

function IndeterminateExample() {
  const [checkedItems, setCheckedItems] = React.useState([false, true])
  const allChecked = checkedItems.every(Boolean)
  const isIndeterminate = checkedItems.some(Boolean) && !allChecked
  return (
    <>
      <Checkbox
        isChecked={allChecked}
        isIndeterminate={isIndeterminate}
        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
      >
        Parent Checkbox
      </Checkbox>
      <Stack pl={6} mt={1} spacing={1}>
        <Checkbox
          isChecked={checkedItems[0]}
          onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
        >
          Child Checkbox 1
        </Checkbox>
        <Checkbox
          isChecked={checkedItems[1]}
          onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
        >
          Child Checkbox 2
        </Checkbox>
      </Stack>
    </>
  )
}