Forum Academy Marketplace Showcase Pricing Features

Radio Buttons - Allowing for multiple to be selected

Hey Bubble members,

I seem to have run into a problem that I’m sure someone knows the solution too so I figured I’d reach out and ask for help.

Question:
I have about 80 different topics that I need to allow my users to select multiple of but Radio buttons only allow you to select one and check boxes would require me to set up a ton of data types to store and using the data would be too difficult. I know there are drop downs and search fields but I would really like to use the radio buttons style. THE QUESTION IS: Is there a way to make it to where my users can select multiple radio buttons at once time?

Yes, you can definitely accomplish this using icons as the radio buttons, instead of the radio button element itself. Here’s an example with 6 topics in the forum app (though it can be any number you need of course):

Preview:

Editor:

This is similar to the forum’s multiselect example using a custom state that holds a List of Topics that the User has selected from a repeating group. To have the app display icons which function similar to the radio button element, we just need to add a radio icon within the repeating group’s cell itself - which reflects if the Current cell’s Topics is in the custom state List or not. I used Google Material Icons, but I think it’s also available with the Ionic Icon plugin. For example, the radio button icon will look like this by default (unselected):

But when the List contains the Current Cell’s Topic, then the conditional formatting changes the icon itself to reflect that it is currently selected:

In this example the custom state is on the page itself (radio_multiselect). Bubble allows for custom states to be created/set on any element on the current page - and the page itself is considered an element. The custom state I initially created is called “Selected Topics”, Type: Topic, List: Yes (since we need to enable the User to select more than one Topic, the value of our state will always be a List of Topics).

If I can clarify how to set this up in your app or if anything looks confusing in the example, please feel free to let me know and I can definitely explain step-by-step. :slight_smile:

1 Like

I will try this out! Thanks!

1 Like