Checkbox & Radio style props are not applied consistently

Description

When styling Checkbox & Radio components using the same style props, I expected a similar visual appearance but it’s currently not the case.

Link to Reproduction

https://codesandbox.io/s/eloquent-hoover-g4s8f

Steps to reproduce

By adding the background or borderColor props to the Checkbox & Radio components.

Chakra UI Version

1.6.4

Browser

Chrome 91

Operating System

• macOS
• Windows
• Linux

Additional Information

In the case of Checkbox, the style props are properly applied to the container part of the component. While with Radio, styles are applied to the control directly.

[seaerchin]

@simontaisne the docs have an example on creating your own custom radio component!

The issue here is that clicking the Box won’t update the state of the Radio

i think this could be remedied by setting height = 'fit-content' as well so that the Box is exactly the size of the checkbox component + label and then clicking on the Box should update the state of the radio! (see here) I do have to say that this behaviour (using Box as a workaround) is less than ideal though 😕

i think that this issue should be addressed primarily by bringing the component styling in line with what checkbox does (assuming that it’s not an issue to do so) and depending on the reply, a follow up PR to bring radio/checkbox behaviour to be identical.

[seaerchin]

i can take a look at this! just to be sure i’m understanding you correctly, you’d expect the container for the radio to also have css styling applied to it right? (i.e, looks identical to checkbox)