[Button] Composability with Checkbox and Radio

Searching for alternatives to regular checkboxes and radio buttons, I found out that composing a Button with a Checkbox or a Radio might be a good idea.

At first, I wanted to use the as prop for the job, but it turns out that Button does not accept a value or name prop (although they are valid button attributes according to MDN). Also, the isDisabled prop only has an effect on the button’s style, but not the checkbox element:

const choice = 'Answer to a quiz question';

<Button
  as={Radio}
  key={choice}
  value={choice}
  borderWidth={2}
  size="lg"
  isDisabled={selectedChoice != null}
  isFullWidth
>
  {choice}
</Button>

My second try was adding Radio as a child of Button, but that approach is semantically incorrect and makes the button’s click area greater than its radio child:

const choice = 'Answer to a quiz question';

<Button variant="outline" isFullWidth>
  <Radio
    key={choice}
    value={choice}
    borderWidth={3}
    size="lg"
    isFullWidth
  >
    {choice}
  </Radio>
</Button>

I think that the first approach should be fine-tuned to work without hassle. I tried using as={props => <Radio {...props} isDisabled />} instead of as={Radio}, but it also resulted in buggy behavior.

[segunadebayo]

@kripod, It’s a bot you know 😉.

I’m aware of this issue and looking to solve it in the dev-ts branch.

[segunadebayo]

This is a good idea @kripod and one that Chakra UI can solve.

At the moment, you can can’t compose the Button and Checkbox. You might need to create this component yourself. The basic structure for a walkaround would be:

function RadioButton(props){
  return (
   <PseudoBox role="radio" aria-checked={props.isChecked} aria-disabled={props.isDisabled} tabIndex="0">
        {isChecked ? <RadioIcon/> : <EmptyRadioIcon/>}
       <Box>Button Label </Box>
    </PseudoBox>
    )
}

Then you can style the states of the PseudoBox using _disabled, _checked, etc.

I’ll look into a composable and accessible way to achieve these components. I guess they’ll be called RadioButton and CheckboxButton. They’ll end up being part of the next patch or just a “composition” example in the Radio and Checkbox docs.

Thanks for this suggestion.