Custom design radio buttons

[thealbertodelrey]

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.

[bodiebloore]

@thealbertodelrey

When one is selected the other can’t also be selected. As to function like a radio button.

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

@thealbertodelrey

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.

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

[newhorizoncode]

This post from a while ago may help

How can I make a checkbox check while others are uncheck

Hey @ojebodeayobami80, The simplest way to achieve this would be via Radio buttons; see GIF for reference. [Untitled design (2)] [Screen Shot 2022-03-07 at 9.46.37 pm] If you must use checkboxes in your use-case, you could do the following. Firstly we will start by making our checkboxes dynamic and giving them the standard value of no. [Screen Shot 2022-03-07 at 10.08.40 pm] Then create a state on the page. This state should contain all three of your values [Screen Shot 2022-03-07 at…

[hergin]

@thealbertodelrey

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

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.

[hergin]

@hergin

Why does the user have a list rather than just one preference?

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.

[dorilama]

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