Elements

This section covers elements – the building blocks that make up your application's user interface

This is the long-form article on Bubble's different elements. If you want the short-form technical reference that details all the different element properties, you'll find that in the link below.

Reference: Elements

Every part of your app's user interface consists of elements that are organized in a hierarchy. The elements within this hierarchy are described in parent-child relationships where the page is the parent of all other elements and you can set up containers that make up parent elements below the page. As such, any element except the page can be both a parent and a child at the same time.

The infobox below gives an introduction to this hierarchy.

What is the element hierarchy?

All elements that you add to your page become part of a hierarchy that controls the structure and design of the page.

The page itself is the parent of every other element on the page, and you can group your elements into containers to keep building more parent-child relationships. This forms the basis of how your browser renders the page correctly.

Article: The element hierarchy

Using elements to build a user interface

Combining different elements like input fields and buttons is how you design your app and give your users different ways to interact with it.

Whether you want to create an elaborate presentation page with images and animations or a simple signup form, it's all done by combining different elements in a way that your users find useful and visually pleasing.

Bubble offers a lot of different elements serving different purposes.

A page like this signup form is done by combining different elements like text, input fields, links and buttons to set up an interface that users understand and find useful.

In this section we'll cover the different categories of elements that you can place on the page

Plugins can also sometimes add new elements that you can place on the page, adding functionality ranging from very simple to very advanced.

Check out out plugin store for information and inspiration.

Elements cover a wide range of different things you can place on the page and they are split into three different categories:

Visual elements

Visual elements are the elements that you place on the page primarily for aesthetic purposes or to display information. They do not accept data input, but they do accept clicks and some of them – such as buttons – are usually connected with workflows.

Visual elements let you design your page to display information and accept clicks. All the elements in this example are visual elements: text, an image and a button respectively.

Examples include:

• buttons

• images

• text

• icons

• videos

• maps

• links

• shapes

Read more in the full article below:

Visual elements

Containers

Groups are elements that contain other elements. A group serves two purposes:

• It gathers other elements (including other groups) inside one container. All the elements belong to the same level of the page hierarchy and follow along if the group is moved or deleted.

• A group can also be used to hold data relevant to the elements inside of it. For example, one group may contain an Edit user form with different elements to edit the user's details such as name and phone number.In that case, the group's data type would be user, allowing all elements inside to reference that user.

Groups can be used both to organize elements like the form above, and to hold the data that you want to work with, such as a user. The group is highlighted with a dashed border in the example.

Bubble offers several different group types that server different purposes:

• Regular groups (that hold elements and data anywhere on the page)

• Repeating groups (used to show rows and columns of things, such as a list of users)

• Popups (used to show elements on top of everything else, such as a warning message)

• Floating groups (used to hover elements above other elements and stick them to one of the screen edges, such as a top navigation bar that remains in place as you scroll)

• Group focus (used to display a group that disappears as soon as you click anywhere else, such as a dropdown menu)

Read more about these properties in the full article on groups:

Containers

Input forms

Input forms are elements that allow your users to provide data to your application, such as:

• Text input (names, comments, other short info)

• Multiline text (descriptions and other longer text)

• Checkbox (check to hold a yes/no value, such as accepting terms and conditions)

• Rich text (formatted text, like blog posts and product descriptions)

• Dropdowns (pick an option from a dropdown list, either static or from the database)

• Search box (search-as-you-type in the database)

• Radio buttons (select one option out of multiple)

• Slider input (pick a numerical value with a visual, draggable slider)

• Date/time Picker (dates like birthdays, deadlines, etc)

• Picture uploader (upload and preview images like profile pics)

• File uploader (upload other types of files)

Read more about each element in the dedicated input forms article:

Input forms

Element behavior

Elements can be set to behave in different ways depending on specific circumstances or actions that your users take. There are two ways in which elements can become interactive:

Conditions

Conditions allow you to set rules for each element that changes how the element looks depending on whether the rule returns a yes or a no. All aspects of element styling can be manipulated with these rules, and this opens up powerful ways to communicate with your users, ranging from subtle nudges to hiding and showing entire sections of the page.

If you want to learn more about how to use conditions, check out our dedicated article on the subject:

Article: Conditions

To see how this can be used in different scenarios, let's go over some examples:

• A condition could be set up on a button to check whether a form is properly filled or not, and style the button to be greyed out and unclickable if it isn't

• A condition could be set up on a group to check whether the current user is logged in. If not, the group is invisible.

• A condition on a group could be set up to check a parameter in the browser's URL. If the parameter is present, the group is visible.

Workflows

If you want to learn more about how to build workflows, check out our dedicated article on the subject: Article: Building workflows

The second way to make elements on your page interactive is to connect them to workflows. A workflow is the umbrella term for an event (such as a button click) that leads to one or more actions (such as writing something to the database).

A workflow consists of an event and a chain of actions. The event is often triggered by an element on a age such as a button.

Using actions is how you get your app to perform specific tasks, such as:

• Creating, editing or deleting something in the database

• Logging users in and out

• Showing, hiding and animating stuff on the screen

• Navigating to a different page or external link

This is not the full list by any means, but as you can see there are many different actions you can run as a user clicks and types their way around your app.

A workflow can consist of multiple actions chained together. For example, after saving something in the database, you may want to display a confirmation message to your users.

You can chain multiple actions together after a button click. In the example above we're saving some changes on the user and then showing a success message.

Naming elements

Watch our Academy quick tip for recommendations on naming your elements

You can edit the name of your element in the top of its Property Editor. Select the existing name and start typing. Conventions for naming your elements is entirely up to you. For example, you could simplify each element name and write what it does next to it, such as “btn submit," or you could capitalize the first word all together or use underscores. Whichever convention you pick, make sure to use it throughout your app. The consistency will help you locate your elements and debug your design as your app grows.

Always use singular names for your data types, such as Product instead of Products. Bubble has a built-in functionality for word inflection. This means that a singular noun will automatically be recognized and displayed in the appropriate plural form of the word when referring to multiple instances of that noun. In other words, Product will shows as Products whenever it makes sense.

By default, Bubble names new elements by its type. If we add a button, Bubble will name it "Button A" if there are no other buttons on the page, or "Button B" if there is a button already. If you change the contents of that element to include text, Bubble will take that text and change the name of the element for you. For example, if we change this button's text to "Submit," the name will update to "Button Submit." You might have several "Submit" buttons throughout your application, so it's a good practice to name your elements as you go along so that you can keep track of each.

Finding elements

If your page has many elements, you may find it difficult to find elements to edit them. Here are a few ways you can find them easily.

The element picker

Use the Element Picker in the Top Bar. All the page elements are listed alphabetically; you can start typing a name and you'll see the different elements. When you hover an entry in the dropdown you will see a thumbnail to confirm this is the right element, and clicking on it will show it and select it. To make the best use of this, you should take the habit of naming your elements carefully.

The element picker is the fastest way to search for and select an element.

Using mouse clicks

When two elements overlap, clicking on them by pressing CMD (MacOS) Ctrl (Windows) will select each element one-by-one, even if one is completely under another.

Using this, you can select the element under all the others, without modifying your page layout.

Using the X-Ray feature

Clicking on the 'X-Ray' icon will make elements semi-transparent, which is handy combined with the CMD+click (MacOS) Ctrl+click (Windows) operation above.

Using the element tree

The Element Tree gives you a clear hierarchic view of all the elements on your page and is an easy way to select (and even move) the elements that you need to.

The App Search Tool

The App Search tool can be used for more advanced search parameters and searching across pages. It's found in the upper right corner of the Bubble editor.

The App Search tool lets you search for specific element types and the text they contaon – even across pages.

Locking elements

If you find yourself moving some elements that should never be moved, you can add some protection in the Editor by checking the box Lock this element (not draggable in editor).

This is purely for editing purposes, and can be handy when working on complex pages.

Using the Inspector to find Element connections

An element can be connected to other parts of your app in many different ways: they can hold custom states, belong to a parent container, be used in a workflow or be referenced in an expression or condition somehwere.

To keep track of how elements are connected to different things you can use the Element inspector. This shows you Element connections categorized by:

• Custom states

  • Create, edit and delete custom states on the element

• Events

• Actions

• Other elements

To reveal the Element Inspector, click on the information icon in the Title Bar of the Property Editor.

The Inspector gives you a useful look at different types of connections to the element you are looking at.

Element security

Even though Bubble is a no-code platform, the final application consists of code so that a browser knows how it should look and function. The elements that you place on the page become a part of this code, which is downloaded to the device of every user who loads the page.

This means that a tech-savvy user can open up the code file and have a look at the elements. From a security perspective, this means that you should never place any sensitive information in an element. Even if it's not visible in your app, it can still be revealed in the code.

Places where you should keep this in mind are in the element name, text content and default values.

A good rule of thumb for element security is to assume that all information you add to a page, whether in elements or workflows, can be viewed by a user in the code. As such, you should avoid placing sensitive information on the page.