Better Radio Buttons in Bubble.io

Improving Forms in Bubble with Better Radio Buttons

In this Bubble tutorial video, I'm going to demonstrate how you can improve the look of your forms in Bubble by having better radio boxes or better toggles. If you have a list of items in your database like this, which is an option set, and I've got created of color with four colors, and I want the user to be able to choose one color and only one color, then this is a perfect opportunity to demonstrate how you can have a better design.

The Value of PlanetNoCode for Bubble Tutorials

Before I launch into that, if you are learning Bubble there is no better place than going to planetnocode.com because we've got even more Bubble tutorial videos on our website than you'll find on our YouTube channel.

Creating Custom Radio Buttons with Icons

Let's dive into the editor here and I'm going to do this using a custom state and I'm going to do that with icons. So let's add in an icon. Now if you find the icon library a little bit limiting in Bubble then you can of course add more icons using a plugin or check out our other tutorials about Font Awesome because you can even have the latest Font Awesome icons in Bubble and it will only take you a few moments to set up.

Setting Up the Icon and Layout

Right now I'm going to use the default ones and go for a circle. So let's have this one here. I'm going to make it a bit bigger. I'm going to center it and add a little bit of padding, margin rather, to the right. There we go. So let's just preview that and see what difference that makes. So it's going to be repeated across our repeating group and now I basically need to set up a workflow to say when it is clicked I want to change the look of the input.

Creating a Workflow for Radio Button Functionality

I can go ahead and say add workflow and I'm going to go ahead and say that this sets a state. Now custom states are a great way of temporarily holding data. Nothing is saved to the database which means that if the page refreshes then all the form data is lost. Now if you can live with that as in many cases when you're building a form then that's fine.

Setting Up Custom States

And just to show you how I've created this custom state for this demo is I'm on the page. You can see from the inspector element tree up here and I click on the eye icon at the top and let me just create it from scratch. So I go create new custom state and I'll say selected color and click create. Now I've done this on the page you can create a custom state on basically any element on the page but I find it easy just to keep them all together. That way I don't lose track of where I've created them.

Configuring the Workflow

Back to the workflow. I simply go to my custom state and I say it's going to become the selected color of the current cell's color. So the current cell of which the circle icon is residing in is now going to become the selected color. And something helpful about this is that basically every time this is clicked it's going to override it which means that if I were to first click on black and then click on white it's going to replace black with white. But I only want this to happen if it isn't already the current color. So I'm going to go into here and say selected color is not current cell's color.

Adding Visual Feedback

Now I need to give some visual feedback because if they click on the circle they're going to expect something to happen. And also I've just noticed that my circles are not looking as they should. Wonder why that is? Let's get rid of that. I'm not sure. Let's just let's see if they change. So basically I want to make this become a circular check. So I'm going to go in to say that this becomes... so I'm here. When? Well it becomes when our custom state color is the cell's color. So again we refer to our custom state is current cell's color.

Optimizing Data Handling

And notice that I'm not doing custom states display. I'm not trying to match together two bits of text like the word white or the word black. I'm just doing it directly with the option set. And that is by far the better way to do it because you're going to reduce the chance of having any typos in there because you just say match these two items in the database.

Testing the Radio Button Functionality

So that gives us some feedback. So let's click preview and see what happens here. And so I click on it and it changes. Now there's one thing we've not accounted for here and this really depends on the UX, the user experience you want to give with your form. Which is if I click black and then I think actually I'd rather not answer this question and I keep clicking on black nothing's going to happen.

Adding a Second Workflow for Better UX

So I need to add in a second workflow and to do that and make it really quick I'm going to copy and paste our existing one. And I like to color code this. So I'm going to say green is when we go from is not to is and then red is going to be when we go from is to is not. So I'm going to invert the only when statement here and I'm going to clear the custom state.

Final Testing and Conclusion

Let's preview that. So now if I click on black click on white it's all working but then if I click on red again it clears out. So there you have it that is how you can use custom states and you can use icons to improve the look of and really add some customization to the look of forms that you build in your Bubble app.