Creating custom toggles using custom states in Bubble.io
In this Bubble tutorial we demonstrates how to create your own custom toggles using Groups, Repeating Groups, Option Sets and Custom States.
Create custom toggles: Learn how to build interactive toggles using Bubble's powerful custom states feature.
Master temporary data storage: Discover the art of storing data temporarily with custom states, enhancing user experience without database writes.
Build dynamic UI elements: Unlock the potential of repeating groups and conditional statements to create responsive, user-friendly interfaces.
Creating Custom Toggles in Bubble.io
Here's a quick Bubble tutorial video demonstrating how to create your own toggles using custom states. So I have an app set up here with a page and if I go into data you can see I have an option set called platforms and then I've got two options YouTube and Vimeo. Then on my page I have a repeating group of type content platforms my option set and then the data sources or platforms that's how I end up with a repeating group that shows you the two options I've created within my option set platforms.
Using Custom States for Temporary Data Storage
So what if I want to create these into buttons to allow a user to choose one or the other? So I can use a custom state for that. Now custom states are a great way of temporarily storing data. Nothing is being written to your database, nothing can be recalled if the page is refreshed, it's just a way of temporarily storing whether it's text or any data type or option set in your app while the user is on the same page.
Creating Custom States on Page Elements
So they can be created on any element but it makes sense to just create them somewhere logical so I'm going to create them on the page itself. So I will just say chosen platform and then I'm not going to use text because I want to really make use of the power of option sets so I'm going to choose platforms and then I want to only give the user the choice of picking one so I'm not ticking this as a list.
Setting Up Workflows for Custom Toggles
That then means I can create a workflow remember because this is a repeating group I'm not creating a workflow manually on every button I just need to do it on one and so my workflow can be when this is clicked I set state of my page chosen platform is current cell's platform. I'm then going to add in a conditional statement for the design to show that the this one is the selected one the chosen platform so I refer to my page custom state and say chosen platform is current cell's platform and then the visual feedback I'm going to give is changing the border color for the sake of this let's make it red.
Testing the Custom Toggle Functionality
So then if I click on it it becomes red and I click on it it that one becomes red. Now that works well for these two buttons here but what if I wanted to enable it so that if someone was to click on the chosen one it unselects it deselects it so I need to add another workflow for that and I'm going to end up with two different workflows each with an only when statement and I like to color code these to make them clear so if I am doing something positive if I'm adding in data I make it green and so I have a conditional statement here of my pages custom state chosen platform is not current cell's platform and then I'm going to copy and paste this and change this one to red and say when it is so this is if you're clicking on it and it that platform is in place then my custom state I want to remove the platform that's chosen so with a custom state that isn't a list I just leave it blank let's test that so I can still click YouTube I can still click Vimeo but then if I click Vimeo again it deselects it because it's running my red workflow.
Conclusion
There you have it a really quick overview of how to make your own custom toggles in Bubble using custom states.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.