[Checkbox] [Radio] Make labels colorable about chakra-ui

[segunadebayo]

Hi @kripod,

Thanks for this observation. The children prop of Radio or Checkbox is optional. If you need to gain control over the styling of the labels, ignore it and compose the component this way.

<Flex as="label">
  <Radio key={choice} value={choice} color="green" />
  <Box ml={2} color="red.500">{choice}</Box>
</Flex>

Note that applying the color prop for primitives other than Radio or Checkbox should be accessed with the dot notation. The Box you have should have a prop of red.X, where X is 50-900.

I've noted your feedback on the color though. I'll test it out.

Thanks again.

[kripod]

I appreciate your detailed feedback. However, the outlined approach comes with a lot of boilerplate and might be hard to remember or reason about, especially for beginners. I would still suggest using a separate iconColor prop, which could be modified on its own, especially with #49 taken into consideration:

<Radio
  value="foo"
  color="red"
  iconColor="black"
  _checked={{ iconColor: 'green' }}
>
  This piece of text should be red, but the icon should be
  black by default or green when hovered
</Radio>

[segunadebayo]

I completely understand your perspective @kripod . Thanks for the feedback, I'll try it out.

[segunadebayo]

Hi @kripod ,

I'm closing to this issue because there are other ways to solve this.

Option 1 (recommended)

const choice = 'Answer to a quiz question';

  <Radio key={choice} value={choice} color="green">
    <Box color="red.500">{choice}</Box>
  </Radio>

Option 2

<Flex as="label">
  <Radio key={choice} value={choice} color="green" />
  <Box ml={2} color="red.500">{choice}</Box>
</Flex>

We've looked into this suggestion:

<Radio
  value="foo"
  color="red"
  iconColor="black"
  _checked={{ iconColor: 'green' }}
>
  This piece of text should be red, but the icon should be
  black by default or green when hovered
</Radio>

We think might not be possible at the moment because the iconColor isn't a style prop and there's more we need to do to support that.

Kindly use the suggested options above.

Thanks again.