Input forms are how you collect information from your users. They range from simple text fields and toggles to more complex controls like date pickers, dropdowns, and selectable lists.
Bubble includes a range of built-in input types for common needs, letting you build everything from a quick signup form to a detailed multi-step questionnaire. Each input type is designed to feel native to the platform, matching the interactions users expect.
Input
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: Guide to BBCode\
External link: BBCode tags reference
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 only supports this format.
None of the built-in Bubble text editors supports HTML formatting, but there are multiple plugins 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
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
Date/TimePicker
The Date/TimePicker is a native mobile element specifically created for the native mobile app editor, offering an alternative to the traditional date/time picker used in the web app editor.
It automatically adapts to the device’s system, displaying the iOS picker on Apple devices and the Android picker on Android devices. This behavior is enabled by default, requiring no additional configuration from your side.
The Date/TimePicker is using the native component on the device, and will not render properly on web preview.
Please use BubbleGo to test any flows involving the Date/TimePicker.
Appearance
The date/time picker’s properties control two key parts:
The element placed in the view.
The native date/time pickerwhich appears when the user clicks the element.
Element properties
Picker style: Choose between:
Label/Icon: Show both a label and a customizable icon.
Label: Show just a label.
Icon placement: Choose to display the icon to the left (leading) or right (trailing) of the label.
Icon size: Set the size of the icon in pixels.
Icon color: Set the color of the icon.
Native date/time picker properties
Input type:
Date: Displays the date picker only. The date value will be stored in the database as the selected date + current time.
Time: Displays the time picker only. The time value will be stored in the database as the current date + selected time.\
\
To combine the date from one picker with the time from another picker, you can use thechange time tooperator.
Accent color
Color picker: Sets the color of a few properties in the calendar picker. See the screenshot below.
Minimum/Maximum date: sets the minimum and maximum datetime that can be picked in the date/time picker.
Selectable lists
A selectable list functions as an input element that allows users to select one or multiple options from a list. It is particularly useful for building filters, segmented controls, and selection forms without requiring additional custom states or workflows.
It can function in single select or multi-select mode, with additional customization options for selection limits and workflow integration. Below are the key behaviors of the selectable list.
Single-select and multi-select behavior
Selectable lists can be set to single-select or multi-select mode, depending on how you want users to interact with them.
Single select behavior
In single-select mode, only one option can be active at a time. Selecting a new item automatically replaces the previous selection, similar to how radio buttons work.
Users can also clear the current selection by tapping the selected item again, returning the list to an unselected state. This makes it easy for users to change their mind or start over without needing a separate reset action.
Multi-select behavior
In multi-select mode, users can choose more than one option from the list.
By default, there’s no cap on how many items can be selected. If you want to limit the selection, you can set a maximum number of choices. Once the user reaches that limit, the remaining options are automatically disabled, and the user has to deselect an item before selecting a new one.
Validation and required lists
Selectable lists can be marked as required, similar to how you’d mark an input field as required. This helps ensure the user makes a valid selection before their data is saved.
The way validation appears follows the same pattern as required inputs:
Conditional styling for missing selections activates when the values are being saved. For example, if the user tries to submit a form without making a selection, the list can visibly indicate that a selection is missing, such as by highlighting a border or showing an error message.
The required styling clears automatically once the selection meets the requirement. In single-select mode, this happens as soon as an item is selected. In multi-select mode with a range restriction, the styling clears once the required number of items has been selected.
Performance considerations
The selectable list loads all items immediately, meaning it does not use lazy loading or virtualization like the vertical list.
Large data sets may impact performance, so it is important to limit the number of options when possible.
This element is not a replacement for vertical lists and should not be used when handling extensive lists of items.
Formatting selected items
The selectable list element has an is selected and isn't selected data source, that can be used in conditionals to apply formatting to selected items.
The conditional must be set on the SelectableListItem pseudo child element, and not on the Selectable list element itself.
Workflows and actions
Workflows can be triggered when a user interacts with a list item. When adding a workflow from the list item property editor, the “When element is clicked” workflow event is automatically pre-filled.
The following actions are available for selectable lists:
Set selectable list value: Set a selected value for the selectable list (single item or list, depending on the selection type).
Select all: Selects all the available entries in the list.
Unselect all: Deselects all selected entries.
Display list: Set a list of entries for the selectable list, formatted as a list.
Clear list: Removes all entries from the list.
Scroll to entry: Scrolls the list to specific record.
Properties
The following properties are available on selectable lists:
’s list of items (if multi)
’s selected item (if single)
’s list of selected items (if multi)
’s list of unselected items (if multi)
’s minimum number of selections (if range is selected)
’s maximum number of selections (if range is selected)
’s number of allowed selections (if exact is selected)
Width
Height
isn’t valid
is disabled
Conditional properties
The following conditional properties are available on selectable lists:
Minimum number of selections (
number): the minimum number of selectable entries, as specified in the minimum number of selection propertyMaximum number of selections (
number): the maximum number of selectable entries, as specified in the maximum number of selection propertyNumber of selections (
number): The currently number of selected entries
Checkbox
The Checkbox element provides an intuitive way to manage selection states without needing complex workflows or custom states.
Here are two common use cases for the Checkbox element:
Filtering to-dos
The Checkbox element can be used to filter lists, such as a list of to-do items. Instead of manually creating icons, workflows, and custom states to manage selections, you can add the Checkbox element directly to each list item. The checkbox works similarly to a button, allowing for customization of icons, labels, sizes, and colors.
It also includes built-in conditionals for the checked and unchecked states, making it simple to toggle between states by tapping. The current value of the checkbox is easily readable, so you can trigger actions based on whether it is selected or not.
Managing Task Status
Another common use case for the Checkbox element is to visually indicate task completion. For instance, when a task is marked as done, the checkbox will appear checked, and when a task is not done, it will appear unchecked. You can modify the default state of the checkbox through conditionals. For example, if a task is marked as complete in the database, the checkbox will automatically reflect that state by appearing checked.
Key Features:
Customizable appearance: Adjust icons, labels, colors, and sizes.
Default checked/unchecked states: Built-in toggling functionality.
Conditional behavior: Reflect the current state based on conditions (e.g., task completion).