Checkbox

1
() => {
2
  const onChange = (e) => {
3
    console.log(e);
4
  };
5
  return (
6
    <Group>
7
      <Checkbox label="Test1" defaultChecked onChange={onChange} />
8
      <Checkbox label="Indeterminate" indeterminate />
9
    </Group>
10
  );
11
}
12

1
() => {
2
  const [disabled, setDisabled] = React.useState(false);
3
  const toggle = () => {
4
    setDisabled(!disabled);
5
  };
6
  return (
7
    <>
8
      <div>
9
        <Checkbox label="Test1" disabled={disabled} />
10
      </div>
11
      <div>
12
        <Button onClick={toggle}>Switch</Button>
13
      </div>
14
    </>
15
  );
16
}
17

1
() => {
2
  const [indeterminate, setIndeterminate] = React.useState(false);
3
  const toggle = () => {
4
    setIndeterminate(!indeterminate);
5
  };
6
  return (
7
    <>
8
      <div>
9
        <Checkbox label="Test1" indeterminate={indeterminate} />
10
      </div>
11
      <div>
12
        <Button onClick={toggle}>Switch</Button>
13
      </div>
14
    </>
15
  );
16
}
17

1
() => {
2
  const [checked, setChecked] = React.useState(false);
3
  const toggle = () => {
4
    setChecked(!checked);
5
  };
6
  return (
7
    <>
8
      <div>
9
        <Checkbox label="Test1" checked={checked} />
10
      </div>
11
      <div>
12
        <Button onClick={toggle}>Switch</Button>
13
      </div>
14
    </>
15
  );
16
}
17

1
() => {
2
  const [value, setValue] = React.useState(['China']);
3
  const toggle = () => {
4
    if (value.length > 1) {
5
      setValue(['China']);
6
    } else {
7
      setValue(['USA', 'China']);
8
    }
9
  };
10
  const onChange = (val) => {
11
    console.log(val);
12
  };
13
  return (
14
    <>
15
      <CheckboxGroup value={value} onChange={onChange}>
16
        <Checkbox label="China" value="China" />
17
        <Checkbox label="USA" value="USA" />
18
      </CheckboxGroup>
19
      <div>
20
        <Button onClick={toggle}>Switch</Button>
21
      </div>
22
    </>
23
  );
24
}
25