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.
Master Bubble & Launch Your MVP
Embark on your Bubble.io journey with our Free Access, or accelerate your progress with the 90-Day Pass for just $99.
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 500+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
No. Our Beginner Essentials course and AI No-Code Coach are designed for total newcomers. You’ll learn Bubble.io step by step - no coding required.
Simply type your question in plain English, and our AI taps into the entire video library to recommend the exact lessons you need. It’s like having a personal instructor on demand.
- Free Plan: Enjoy unlimited access to the Beginner Essentials course.
- 90-Day Pass: Unlock all 500+ videos and full AI functionality for 90 days. Afterward, you can subscribe at a great rate to keep building and learning.
Our AI No-Code Coach is your first stop. If you need deeper help, consider optional 1:1 coaching for personalized guidance. We also host occasional community events to share tips and celebrate wins together.
After your pass ends, you’re free to continue with a cost-effective subscription that includes ongoing AI No-Code Coach access and any future content updates.
Absolutely. If you don’t see real progress within 30 days of your 90-Day Pass, let us know, and we’ll issue a full refund—no questions asked.