Checkbox#

If you want to check something off your list, you're in the right place!

Import#

js
1
import { Checkbox } from "@codeday/topo/Atom";

Example#

Disabled Checkbox#

Checkbox with custom color#

Checkbox sizes#

Invalid Checkbox#

Changing the spacing#

Changing the icon color and size#

CheckboxGroup#

More advanced Checkbox things#

Look at the Chakra-UI docs for live previews, this documentation libary doesn't support previewing components and having editable text so I'm just sending you there.

Indeterminate#

link to Chakra docs

js
1
function IndeterminateExample() {
2
  const [checkedItems, setCheckedItems] = React.useState([false, false]);
3

4
  const allChecked = checkedItems.every(Boolean);
5
  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
6

7
  return (
8
    <>
9
      <Checkbox
10
        isChecked={allChecked}
11
        isIndeterminate={isIndeterminate}
12
        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
13
      >
14
        Parent Checkbox
15
      </Checkbox>
16
      <Stack pl={6} mt={1} spacing={1}>
17
        <Checkbox
18
          isChecked={checkedItems[0]}
19
          onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
20
        >
21
          Child Checkbox 1
22
        </Checkbox>
23
        <Checkbox
24
          isChecked={checkedItems[1]}
25
          onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
26
        >
27
          Child Checkbox 2
28
        </Checkbox>
29
      </Stack>
30
    </>
31
  );
32
}

Custom icon#

link to Chakra docs

js
1
/**
2
 * 1. Create a custom icon that accepts 2 props: `isIndeterminate` and `isChecked`
3
 */
4
function CustomIcon(props) {
5
  const { isIndeterminate, isChecked, ...rest } = props;
6

7
  const d = isIndeterminate
8
    ? "M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.917,1,1,0,1,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.255a1,1,0,1,1-2,0,4,4,0,1,1,5.6,3.666Z"
9
    : "M0,12a1.5,1.5,0,0,0,1.5,1.5h8.75a.25.25,0,0,1,.25.25V22.5a1.5,1.5,0,0,0,3,0V13.75a.25.25,0,0,1,.25-.25H22.5a1.5,1.5,0,0,0,0-3H13.75a.25.25,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0v8.75a.25.25,0,0,1-.25.25H1.5A1.5,1.5,0,0,0,0,12Z";
10

11
  return (
12
    <Icon viewBox="0 0 24 24" {...rest}>
13
      <path fill="currentColor" d={d} />
14
    </Icon>
15
  );
16
}
17

18
function CustomCheckbox() {
19
  return (
20
    <Checkbox icon={<CustomIcon />} colorScheme="cyan">
21
      Hello world
22
    </Checkbox>
23
  );
24
}
25

26
render(<CustomCheckbox />);