How To Make a Custom Designed Tickbox in Bubble

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.