Custom design radio buttons

I’ve designed my own custom radio buttons:

I want a user to choose an option and once hitting a save button it will add that option to the User data type under “preference” field.

I don’t want to use the current radio buttons in Bubble as they are not aesthetically pleasing.

Currently, what I’ve built is this:
I’ve created a data type for “Preference” and added the required fields I needed.

Then I’ve added a list of Preferences in the User data type and mapped it to the preference data type.

Then I’ve added a custom state on the page level

On the page I’ve added a repeating group and added ionic icons for the radio buttons and added all my elements needed.

Then I’ve added a workflow for when a user clicks the radio button

But not sure how to make it work like a radio button. When one is selected the other can’t also be selected. As to function like a radio button.

I also can’t figure out how to make the background change colour on the selected radio option. I tried playing around with conditional but I think everything I’ve done is wrong which is why it’s not working.

Any help is appreciated.

1 Like

If you only want one to be selected, why is the custom state a list?

Maybe I am misunderstanding this, but this will make it so only 1 preference can be selected at a time

Add a condition to say “current cells preference is in choose_preferences selected preference” (and if you change it to a single item) “current cells preference is choose_preferences selected preference”

Then if this condition is true, change the background color and anything else you need to change

This post from a while ago may help

Why does the user have a list rather than just one preference? Because if it is a list, that means the selection of preferences should be checkboxes rather than radio buttons because multiple can be selected.

If you select only 1 preference per user, it would be straight forward. See the demo below:

You don’t need anything special for this. Just change the preference to single preference instead of a list. The icon in repeating group will be conditionally change based on the current cell’s preference is current user’s preference or not.

And when the button is clicked, it will just replace current user’s preference:

If you still want a list, probably, you should switch from radio buttons to checkboxes. But it still can be done in a similar logic.

1 Like

Gently reminder that this kind of implementation in bubble lacks any form of accessibility :confused: . We really need at least the ability to add attributes to elements.

This topic was automatically closed after 70 days. New replies are no longer allowed.