Can I Use Buttons like Radio Buttons?

Hi CT :slight_smile: This is definitely possible. One way to set this up would be to use a repeating group. That repeating group would probably be a custom type, and have a field to store the value you would typically have as the label of the radio button.

Preview: buttons-radio
Editor: faye-demo-app | Bubble Editor

In the above example, the User is choosing between two types of devices, Mobile or Desktop. To do this I first created a new type called “Device”:

Then created two entries in the App data tab for Mobile and Desktop:

Back on the page, place a repeating group on the page and a button in the cell. Here we’re presenting two button choices to the User, Mobile or Desktop, and can use “Do A Search for Devices” in order to display those options as buttons:

To temporarily store the Device value that the User just clicked, we can use a custom state. (Note: custom states aren’t saved on a Thing until a workflow specifically does that. If the page is refreshed or closed, the custom state is reset to empty). Here I created a custom state on the repeating group with these settings:

This workflow then sets that custom state to the Device that was just clicked:

There is also a conditional formatting change on the button which will create a border on the button that is currently ‘selected’, similar to a radio button. In this example, a blue border is around the button, but this could be anything you choose of course.

Last but not least! You can use the custom state expression “RepeatingGroup’sSelectedDevice” in order to save that Device value to the Current User:

.

And that should do it! If you have any questions feel free to let me know. :slight_smile:

6 Likes