Is this RadioGroup pattern possible?

[dungle-scrubs]

Hi, really loving Radix/Stitches, a big thank you. With RadioGroup, is this possible?

Normally, I'd put content like this into <Label> and then use a sibling selector + the active radio (which I suppose I could still do). But I was wondering if there was a slicker way to do that?

In this case, I'm attempting to put the actual RadioGroupRadio inside of the image wrapper to render the radio, which you've made super simple. But I can't target parents to apply a selected styled (w/out additional JavaScript). I also can't put an <img> inside of RadioGroupRadio because it renders as <button>, which can't hold content.

Is this module not appropriate for what I'm attempting? Thanks

Note: I know I could apply a background image to <button>, but I'm not willing to give up the way I handle image loading using <img>.

[jjenzz]

an img is a totally valid child of a button and if you give it an alt attribute, its value will be used to label the button. the radio in the top right corner can be achieved by styling an additional aria-hidden element inside the button: https://codesandbox.io/s/withered-wildflower-p4w8j5?file=/src/App.js

[dungle-scrubs]

Thanks, I didn't know that and it worked out great. Appreciate the help!