Join the Webstudio community

Updated last year

Put Radix states on more/different items of the component

At a glance
Take for example the radio buttons. The "checked" state exists only on the parent of a group of radios. This doesn't do me any good (maybe there's a use case). Rather I'd like to have the state styling option on an individual radio item. That way when a radio is checked, I can do something to the radio item.
Attachments
image.png
image.png
O
J
7 comments
So basically styling of child elements inside a radio based on the radio state, right?
Correct. I've also run into this use case in other radix components too. I believe accordion is at least one other that would benefit from having the state on additional elements
wait, but both switch container and thumb have checked/unchecked states which are stylable
or did you mean to add other instances inside and have them access the state of the switch
Switch does it right IMO cuz as you said, it has it on the parent and child . But I an referring to Radio and Accordion which only has it on one or the other. Radio has it only on the Radio Group (can't imagine a good use case for that) and Accordion only has it on the Item Trigger
I propose that for Radio, the state is moved to the Label (unless there is a use case to style the group of radios when one is checked, then have state on both)
And for Accordion I propose state be added to the Item, so styles can be modified for one item when it's opened or closed
Add a reply
Sign up and join the conversation on Discord