This works for Radio Buttons and Checkboxes, but let me explain for RadioButtons for now.
The simplest thing I had trouble with is figuring out how to “group” the radio buttons together so only one is on. RadioButtonGroup kind of works, after fiddling with it for a while, but I couldn’t figure out how to edit the buttons with it. And the lack of information online on how to make it work (as of today) is pretty much zero. There’s a “Choice” property that seems to create very generic radio buttons when you add commas in it ("MyRadio1,MyRadio2, etc…). If someone has a simple tutorial on that it would great.
The way I did it, was by creating a “GroupBox” (one of the containers available in the builder), then adding my “RadioButtons” under that. (see screentshot - nevemind, it says I’m not allowed to post images, hmm). Any Radio Button or Checkbox nested under that will ensure only one is active. (Like a Toggle Group in the old UI).
But you’ll notice that you can’t edit any of it’s children (including the “checkmark”. You’ll have to reference those with a class variable (or “selector” as unity calls them.)
Once you’ve created your RadioButtons under the GroupBox, here’s what to do:
1. Create a “selector” (Top left of UI Builder, there should be a “Add new selector” input) and let’s call it “my-radio-button”.
2. Add that selector (drag and drop) to all your RadioButtons. You can change the look and feel of your radio buttons through here instead of doing on all of them separatly. Just easier.
3. Then create another selector with the same name, but add " .unity-radio-button__checkmark-background" (that’s 2 underscores, btw) to the name.
So it should be called “.my-radio-button .unity-radio-button__checkmark-background”. It’s long so you might not see it all. This is the selector that will allow you to change the background, or the base “look” of the radio button. You DON’T have to add it to your RadioButton.
What this does is reference any element that has “.unity-radio-button__checkmark-background” as a child of any element that has “.my-radio-button”. (Sorry that sounded confusing.)
(Btw, you can also reference element names instead of the class/selector names using the # symbol. #is for element names, the . (dot) is for class names.)
4. For the checkmark/inner dot image, just create another selector called “.my-radio-button .unity-radio-button__checkmark”.
That’s it!
For the checkboxes, the class/selector name is called “.unity-toggle__checkmark” instead.
Hopefully this helps someone. And if someone has a better way, please mention it in the thread. I’m no expert at this, just figured this out by trial and error.
Edit:
To Add on to this…
For Toggles, the two classes you need to create are these:
.my-toggle-button .unity-toggle__checkmark (this is for the “empty” toggle background)
.my-toggle-button .unity-toggle__input:checked (this is to change the checkmark image)
Just add one of them to your toggle element in UI builder and both will be used.