Checkbox

A group of options for multiple choices.

Import: import { Checkbox } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Usage

Checkbox can be used alone to switch between two states.

Basic Usage

Set the default check through the defaultCheck attribute, and add event functions through onChange

() => {
  const onChange = (e) => {
    console.log(e);
  };
  return (
    <Group>
      <Checkbox label="Test1" defaultChecked onChange={onChange} />
      <Checkbox label="Indeterminate" indeterminate />
    </Group>
  );
}

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

Disabled State

Disabled state for Checkbox.

() => {
  const [disabled, setDisabled] = React.useState(false);
  const toggle = () => {
    setDisabled(!disabled);
  };
  return (
    <>
      <div>
        <Checkbox label="Test1" disabled={disabled} />
      </div>
      <div>
        <Button onClick={toggle}>Switch</Button>
      </div>
    </>
  );
}

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

Indeterminate

The indeterminate property can help you to achieve a 'check all' effect.

() => {
  const [indeterminate, setIndeterminate] = React.useState(false);
  const toggle = () => {
    setIndeterminate(!indeterminate);
  };
  return (
    <>
      <div>
        <Checkbox label="Test1" indeterminate={indeterminate} />
      </div>
      <div>
        <Button onClick={toggle}>Switch</Button>
      </div>
    </>
  );
}

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

Checked Controlled

() => {
  const [checked, setChecked] = React.useState(false);
  const toggle = () => {
    setChecked(!checked);
  };
  return (
    <>
      <div>
        <Checkbox label="Test1" checked={checked} />
      </div>
      <div>
        <Button onClick={toggle}>Switch</Button>
      </div>
    </>
  );
}

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

Checkbox Group

() => {
  const [value, setValue] = React.useState(['China']);
  const toggle = () => {
    if (value.length > 1) {
      setValue(['China']);
    } else {
      setValue(['USA', 'China']);
    }
  };
  const onChange = (val) => {
    console.log(val);
  };
  return (
    <>
      <CheckboxGroup value={value} onChange={onChange}>
        <Checkbox label="China" value="China" />
        <Checkbox label="USA" value="USA" />
      </CheckboxGroup>
      <div>
        <Button onClick={toggle}>Switch</Button>
      </div>
    </>
  );
}

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