How To Make a Custom Designed Tickbox in Bubble
In this Bubble.io tutorial video we show how to add custom tickboxes / checkboxes to your Bubble app.
Custom checkbox revolution: Learn how to create a stylish, customizable checkbox that links to your terms and conditions!
Unlock advanced form design: Discover how to use the Ionic Elements plugin to elevate your Bubble forms beyond basic functionality.
No more boring checkboxes: Transform your user agreement process with this simple yet powerful Bubble technique.
The Limitations of Built-in Checkboxes in Bubble
Sometimes the built-in checkbox element in Bubble just isn't going to cut it for your app. There can be a number of reasons for this. One could be how little you can really style this unless you were to write a load of custom CSS. Another might be that you want the terms and conditions portion of this label to link through to your terms and conditions. And you can't do that with the built-in checkbox because by clicking on any of the label here, it checks or un-checks the box. You can't make it into a link.
Creating a Custom Checkbox with Ionic Elements
So here is one of many ways of building a custom checkbox into your form. And so we'll get rid of that. I'm going to be using a plugin called Ionic Elements. It's free and it's made by Bubble. And we now get these extra elements here. And I'm going to be using a toggle. And now I put in my label. So this is going to say I agree to the terms and conditions.
Connecting the Custom Checkbox to Your Database
Okay, and then this is how you go about wiring up to your database. So I'll sign up to user. And which is when the next person has clicked, step one, sign up the user. I then need to have a field in here if I show you my database structure. A field in here which is of yes, no. In programming speak, it's a Boolean. It's either true or false, but Bubble uses perhaps a bit more of a user-friendly, a yes, no.
Linking the Ionic Toggle to the Database Field
So now I have my yes, no field. I can link this directly up to my Ionic toggle because it only gives a is it checked or isn't it checked? A yes, no. And then let's preview it. Okay, that's looking good. But I would say I need to have it unchecked so the user has the choice of whether they check it.
Finalizing the User Sign-up Process
Okay, so my user fills in the form, they check it, and then they hit next. And that will save into the database that they have agreed to my Ts and Cs.
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.