Text and numbers

This section covers elements that accept text and numbers as user input

Text and number inputs allow your users to provide their own text strings and numbers to your application that can then be saved in the database or used in other ways.

There are a few different elements that are useful in various scenarios, and those elements can be set up to handle different kinds of formatting and user experiences.

Input elements

This is the user manual article on the Input Element which gives an overview of how the element works. If you want the technical reference that describes all the settings for this element, check out the Reference entry:

Reference:

Input elements are used for single-line plaintext, but they allow you to specify a content format from a wide range of different options. The Field type returned in the list below specifies what kind of database field format the input will return.

How Bubble stores text formatting

Bubble uses a markup language called BBCode to store text formatting such as bold, italitcs, bullet points etc. The BBCode is generated and applied automatically as you add formatting to your text.

BBCode is simpler and safer to use than HTML and because it has more limited capabilities, and only allows for a select number of tags. This stops your users from being able to upload any malicious code such as CSS or Javascript that might break the app.

External link: External link:

I want to use HTML instead

Sometimes it's useful to be able to store formatted text as HTML, such as when you want to pass formatted text to an email sending service that ony supports this format.

None of the built-in Bubble text editors supports HTML formatting, but there are multiple that allow you to store text with formatting as HTML instead of BBCode. Searching the plugin store for Rich Text Editor is likely to give you some results that support this.

Regular text elements don't support HTML either: if you want to display text formatted with HTML you can use the built-in HTML element.

Because of the predictive text functionality on Android devices, some content formats involving masks have a slightly different UX. This applies to US Phone, Percentage, Currency, Date, Euro date, and Text (numbers only).

On Android devices, the input allows users to type anything and validates the content against the mask only after the user stops typing.

This does not affect the final data generated by the input.

Text

The input will accept any text value.

Field type returned: text

Email

The input will only accept text values that are formatted like an email address.

Field type returned: text

Password

The input will accept any kind of text value, but the characters written will be replaced by asterisks.

Field type returned: text

Integer

The input will only accept any whole number. Use this when you need to collect numerical values that can later be used for calculations (as opposed to numbers saved as text). You can specify a dynamic minimum and maximum value when this option is selected.

Field type returned: number

Decimal

The input will accept any whole number or decimal number. You can specify a minimum and maximum value, as well as the number of decimals to include. You can also set the input to automatically include thousands separators as the user types. This setting is only aesthetic and does not affect the final value.

Field type returned: number

Address

A geographic address. With this option, the input automatically validates the address with Google Maps. Note that the input does not automatically search for valid addresses as the user types, so the user has to provide an already valid address (by copy/pasting directly from Google Maps for example). If you want the user to be able to see Google Maps search results as they type you may want to look into using the Search box element instead.

Field type returned: address

US phone

This input will accept correctly formatted US phone numbers. The value is saved as a text.

Field type returned: text

Percentage

This input will format the user's input as a percentage and accept input such as 20%. Bubble will automatically save it in the correct numerical equivalent of the provided percentage point. For example, 20% will be saved as the number 0.2 and 150% will be saved as 1.5.

Field type returned: number

Currency

The input will accept any whole number or decimal number and it will automatically format the input in the chosen currency, such as $20. You can specify a minimum and maximum value, as well as the number of decimals to include. You can also set the input to automatically include thousands separators as the user types. The currency and thousands separators settings are only aesthetic and do not affect the final value.

Field type returned: number

Date

The input will accept any date, but does not include time. It automatically formats the input's value as mm/dd/yyyy while the user types, guiding the user to provide the date in the right way. You can specify a given time zone for the input and Bubble will automatically calculate any offset from the user's current time zone. If no time zone is provided, the user's current time zone will be used. Dates are saved at 12 am (00:00) on the given date.

Field type returned: date

Euro date

The input will accept any date, but does not include time. It automatically formats the input's value as dd/mm/yyyy while the user types, guiding the user to provide the date in the right way. You can specify a given time zone for the input and Bubble will automatically calculate any offset from the user's current time zone. If no time zone is provided, the user's current time zone will be used. Dates are saved at 12 am (00:00) on the given date. The difference between this content format and the Date format is purely visual.

Field type returned: date

Text (numbers only)

This input will only accept whole numbers and the result will be saved as text. This is useful when you want to save numerical values that need to remain exactly as the user typed (without losing leading zero's for example) and will not be used for any type of calculation, such as international phone numbers, zip codes and order numbers.

Field type returned: text

Storing numbers as text versus storing them as numbers

What is the difference between the two?

The Bubble database offers two different field types that can both be used to save numerical values: text and number.

Why would you ever want to save a number as a text string? There are a few scenarios where it makes sense to do so:

When you need to include leading zero's

In an integer (or number) a leading zero represents no value and is disregarded when saved to the database. After all 045 and 45 are the same thing from a mathematical point of view and the zero only adds confusion and increases the total size of the database.

Sometimes leading zero's are necessary: for example a phone number or zip code might start with a zero and they must be stored as text to preserve the complete value.

When you need to pass the data as text

Sometimes when you communicate with an external system through an API, that system may expect a numerical value to be passed as text. In that case it can be useful to store it as text in the database so as to avoid having to convert it later.

When to use what

Text should be used when you are working with numerical values that will remain static and will not be included in any kinds of calculations. For example:

Phone numbers
Zip codes
Postal codes
Product/Part numbers

Numbers should be used when you are working with values that may need to be calculated or aggregated, such as:

Year of birth
Age
Counts and totals (such as the item cart and total value of a cart)
Financial numbers
Enumerated values, such as the values used to represent the days of the week (e.g. Sunday = 0, Monday = 1, etc.)

Multiline input

As the name suggests, the Multiline input element allows you to set up a text input element that allows for multiple lines of text. Like the regular text input, this element supports plaintext only, and does not provide any custom formatting.

Use the Multiline input element when you need the user to be able to supply multiple lines of text but you don't want them to be able to add formatting such as bold, italic and headers.

Field type returned: text

Rich Text Editor

The Rich Text Editor is another multiline input element that allows users to type a rich formatted text with formatting such as colors, fonts, bullet points and links.

The Rich Text Editor element comes with a setting to give it a more minimalistic design where the toolbar is only visible when you select some text:

You can also choose to show fewer format settings than the ones above. The screenshot shows the full suite of available options.