[CheckBox] isChecked prop is not affecting the checked state

Describe the bug The CheckBox isChecked prop is not affecting the checked state of the checkbox.

Expected Behavior Expect the CheckBox to be checked when isChecked prop is set to true.

To Reproduce

1. Create a CheckboxGroup
2. Create a CheckBox inside the CheckboxGroup
3. Set isChecked={true}

import { CheckboxGroup, Checkbox } from '@chakra-ui/core'

<CheckboxGroup name="MyCheckBoxGroup">
  <Checkbox value="test" isChecked={true}>
    Test
  </Checkbox>
</CheckboxGroup>

Desktop (please complete the following information):

• macOS Catalina 10.15.1
• Firefox 70.0.1 64-bit
• Chrome 78.0.3904.108
• “@chakra-ui/core”: “^0.5.0”

I’ve tried passing the onChange prop as well, since isCheck={true} makes the component controlled, as specified in the docs.

[lee-reinhardt]

From reading the docs, I believe when using a <CheckboxGroup /> the checks are determined at the group level.

You want to do:

<CheckboxGroup name="MyCheckBoxGroup" value={["test"]}>
  <Checkbox value="test">
    Test
  </Checkbox>
</CheckboxGroup>

https://chakra-ui.com/checkbox#checkboxgroup-props

[zipang]

Arghh… 😱 You should really mention this in big red letters in the updated documentation of the CheckBox element, because it’s not there anymore and i’ve literally spent days (and weeks between) trying to figure out why none of these worked : isChecked, defaultIsChecked, defaultChecked and onChange (?) It’s not obvious that these properties should stop working when inside a container ! Cheers,