Allow granular styling of checkbox, label, and icon in Checkbox and Radio components

Thank you for the incredible work! Chakra UI is awesome. 😃

Is your feature request related to a problem? Please describe. Thus far, our implementation of Chakra UI has been seamless, with a high degree of freedom in customizing the appearance of components to our designs. However, the implementation of Checkbox and Radio components exposed far less freedom to customize the look and feel…

Describe the solution you’d like Ideally, I would like to be able to be able to inject arbitrary property overrides into the <Radio> and the <Checkbox> components that will be applied to the <ControlBox>, the <Box as="span">, and the <Icon> child components in both Chakra components.

One API that I could imagine could be something like:

<Checkbox propOverrides={'checkbox': {}, 'label': {}, 'icon': {}} />

Alternatively, the overrides could be exposed as top-level properties:

<Checkbox checkboxProps={} labelProps={} iconProps={} />

Describe alternatives you’ve considered Presently, the workaround I am implementing is to follow the recommendations outlined in https://chakra-ui.com/controlbox however this involves duplicating much of the existing source code in Chakra UI for only a few aesthetic changes in the sub-components of <Radio> and <Checkbox>.

It would be very helpful to implement the Chakra Checkbox and Radio components, out-of-the-box. However, we need a high degree of style customization.

[nelsieborja]

Checkbox iconSize prop seems broken. Tried setting its value but it is not affecting the size of the check icon.

[mattstobbs]

In case anyone still has this problem, we were able to update the stylings by updating our theme to extend the base styles found in https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/checkbox.ts

const theme = {
  components: {
    Checkbox: {
      baseStyle: {
        icon: {
          color: 'white',
        },
        control: {
          border: '1px',
          borderColor: 'gray.300',
          borderRadius: 'base',
          _disabled: {
            borderColor: 'gray.300',
            bg: 'gray.200',
          },
        },
        label: {
          fontWeight: 'medium',
          color: 'gray.900',
        },
      },
    },
  },
};