Adding support for _checked state selector to Checkbox container

Description

It can be useful to be able to set the container style of a <Checkbox/> depending on whether or not it’s checked. For example, changing the background to make the checked state stand out.

Problem Statement/Justification

Some design systems may require being able to change the container styling depending on the checked state.

Also makes sense to add for a more consistent API as both the control and label parts seem to support a _checked state.

Proposed Solution or API

Something like

{
  baseStyle: {
    container: {
      _checked: {
        bg: 'red.200'
      }
    }
  }
}

Alternatives

Currently making a custom <Checkbox/> component.

Additional Information

Example:

[segunadebayo]

@codetheweb Yes, it still stands and I think it’s a valid use-case.

I’ve just added support for this. It’ll be available in the next release.

[anubra266]

Oh…but the Checkbox doesn’t have a container part