Checkbox

{/* large */}
<Checkbox label="Check me!" size="large" />

{/* standard */}
<Checkbox label="Check me!" size="standard" />

<Checkbox isDisabled label="Check me!" />

<Checkbox errorMessage="Invalid selection" label="Check me!" />

<Stack className="gap-2">
  <Checkbox status="error" label="Check me!" />
  <Checkbox status="warning" label="Check me!" />
</Stack>

<Stack className="gap-2">
  <Checkbox
    status="error"
    fieldMessage="Invalid selection"
    label="Check me!"
  />
  <Checkbox
    status="warning"
    fieldMessage="Invalid selection"
    label="Check me!"
  />
</Stack>

  const [selected, setSelected] = React.useState(false);
  const handleChange = (e) => setSelected(e.target.checked);

  return (
    <Stack>
      <Checkbox label="Check me!" onChange={handleChange} />
      <Text className="text-body-12"> Status: {selected ? "Checked ✅  " : "Unchecked ❌"}</Text>
    </Stack>
  );

  const checkboxRef = React.useRef(null);
  const [selected, setSelected] = React.useState(true);
  const handleChange = () => {
    if (checkboxRef.current) {
      setSelected(checkboxRef.current.checked);
    }
  };
  const handleClick = () => {
      alert(`My value is: "${checkboxRef.current.checked}"`);
  };

  return (
    <Stack className="gap-2">
      <Checkbox defaultChecked={true} label="Check me!" onChange={handleChange} ref={checkboxRef} />
      <Text className="text-body-12"> Status: {selected ? "Checked ✅  " : "Unchecked ❌"} </Text>
      <Button onClick={handleClick}>Click me!</Button>
    </Stack>
);

  const [checkedItems, setCheckedItems] = React.useState({
    1: true, // By default checked (makes header checkbox render in indeterminate state)
    2: false,
    3: false,
    4: false,
  });

  const [headerDisabled, setHeaderDisabled] = React.useState(false); // toggle this to make header checkbox disabled

  const disabledItems = {
			1: false,
			2: true, // By default disabled checkbox sub-item
			3: false,
      4: false,
		};

  const enabledItems = Object.keys(checkedItems).filter(
    (key) => !disabledItems[key]
  );

  const allChecked = enabledItems.every((key) => checkedItems[key]);
  const someChecked = enabledItems.some((key) => checkedItems[key]) && !allChecked;

  const handleHeaderChange = () => {
    const newCheckedState = !allChecked;
    setCheckedItems((prevState) => {
      const updatedState = { ...prevState };
      enabledItems.forEach((key) => {
        updatedState[key] = newCheckedState;
      });
      return updatedState;
    });
  };

  const handleItemChange = (id) => {
    setCheckedItems((prevState) => ({
      ...prevState,
      [id]: !prevState[id],
    }));
  };

  return (
    <Stack className="gap-2">
				<Checkbox
					checked={allChecked}
          isDisabled={headerDisabled}
					indeterminate={someChecked} // Visually indicates a partially selected state
					label="Select all"
					onChange={handleHeaderChange}
				/>
				<Stack className="pl-5">
					<Checkbox
						checked={checkedItems['1']}
						id="1"
            isDisabled={headerDisabled || disabledItems['1']} // When header is disabled, all sub-items should disabled
						label="Item 1"
						onChange={() => handleItemChange('1')}
					/>
					<Checkbox
						checked={checkedItems['2']}
						id="2"
            isDisabled={headerDisabled || disabledItems['2']} // By default disabled (header checkbox should not consider this for allchecked/somechecked state)
						label="Item 2"
						onChange={() => handleItemChange('2')}
					/>
					<Checkbox
						checked={checkedItems['3']}
						id="3"
            isDisabled={headerDisabled || disabledItems['3']}
						label="Item 3"
						onChange={() => handleItemChange('3')} // Ensure "id" is passed to handleItemChange
					/>
          <Checkbox
						checked={checkedItems['4']}
						id="4"
            isDisabled={headerDisabled || disabledItems['3']}
						label="Item 4"
						onChange={() => handleItemChange('4')}
					/>
				</Stack>
			</Stack>
);

<>
  <Checkbox
    label="Checkbox at start, Label at end"
    description="This is a description"
    checkboxPosition="start"
  />

  <Checkbox
    label="Label at start, Checkbox at end"
    description="This is a description"
    checkboxPosition="end"
    defaultChecked={true}
  />
</>