Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Better checkboxes and toggles

In this Bubble tutorial video we demonstrate how you can quickly improve the look of checkboxes in your Bubble app by adding an Ionic Toggle.

Improve the Look of Your Bubble App Forms with Ionic Plugin

Are you building a form in your Bubble app and finding the default checkbox element to be lacking in aesthetics? If so, we have a solution for you! In this blog post, we'll introduce you to the Ionic plugin, which can help you create more visually appealing forms in your Bubble app.

Now, let's install the Ionic plugin and explore its features.

The Ionic Toggle

One of the key elements provided by the Ionic plugin is the toggle. With the Ionic toggle, you can achieve the same functionality as a checkbox, including auto-binding and setting a default state. When you refer to the Ionic toggle in your submit form or create new thing workflow, you can simply use the syntax "Ionic toggle A, yes/no" to populate the corresponding field.

But what makes the Ionic toggle stand out is its sleek animation and modern design. It adds a touch of elegance to your forms, making them more visually appealing. And if you want to customize the color, the Ionic plugin allows you to do that too. Simply choose from a range of options, such as "royal" for a purple hue, and see your toggle transform into a beautiful element.

Adding Labels and Styling

To enhance the user experience further, you can add labels to your toggles. By placing a text element next to the toggle and styling it accordingly, you can create a clear and intuitive interface for your users. In the example demonstrated in the video, a row was used to contain the label and toggle, with a gap of eight pixels between them. The row was then centered to ensure alignment.

The Ionic Checkbox

If you prefer the traditional checkbox look, the Ionic plugin has got you covered. With the Ionic checkbox, you can maintain the same level of visual appeal while still offering the familiar checkbox functionality. Simply replace the toggle element with the checkbox element in your form, and you're good to go.

A More Attractive Form

By incorporating the Ionic plugin into your Bubble app, you can transform your forms into visually stunning interfaces. The Ionic toggle and checkbox offer a modern and sleek alternative to the default checkbox element, providing a more attractive and engaging user experience.

So, why settle for a lackluster form when you can easily enhance its appearance with the Ionic plugin? Give it a try and see the difference it can make in your Bubble app.

Latest videos