Input Forms
Last updated
Was this helpful?
Last updated
Was this helpful?
This core reference entry is suited for beginner-level builders.
Input forms are elements that accept input from the user, such as text input, file/image upload, checkboxes and calendars.
These are the options that all input elements share.
Auto-binding modifies a thing automatically as the user modifies the input, without using a workflow. Check this box to enable this functionality. For this to work, the input needs to be in a group or page that has a type of content defined. The thing of the parent group or page will be the thing that is modified. Also, the correct permission for this type must be set in the Privacy section in the Data Tab.
Select the field the input should modify. It must be of a compatible type with the input.
Check this box to show an alert after the auto-binding operation successfully completes.
Select the alert to display.
Define the message to be shown in the alert or use the text defined at the alert level.
Check this box if the input should not be empty when a workflow using its content is run. In other words, Bubble prevents workflows from running until these inputs are filled. Use this to make sure all necessary information has been entered by the user before a workflow is run. When an input is empty and shouldn't be, it is marked as invalid by Bubble.
Check this box to prevent users from interacting with the input element. In this case, the content of the input will be accessible on a read-only basis.
This element enables users to type text on one line. It's useful for typing in an email or password.
Note: The 'undo' ctrl+z command has been disabled for Inputs due to a bug in the library we use for input formatting.
When this element is empty, text will be displayed to prompt the user to enter something.
This field defines the input before the user modifies it or when reset. For example, when a user modifies their email, the initial content will likely be 'Current user's email.'
Select a type from this dropdown menu to define the input type. This is important for two reasons: – To make sure that what is entered is valid and prevents workflows from running if the content isn't valid. In this case, the input is set to an 'Isn't valid state.' This detects, for instance, when an email address follows the pattern 'name@example.com.' – It sometimes controls what characters can be typed and what characters are added automatically, in order to visually assist users for dates, passwords, etc. Choose from: – Text: A plain sequence of characters or numbers. – Email: An email address. – Password: A sequence of characters that are hidden as the user types. – Integer: A number without decimals. – Decimal: A number with decimals. – Address: A geographic address. With this option, the input automatically validates the address with Google Maps. – US Phone: A phone number following the format (xxx) yyy-zzzz. – Percentage: A number represented as 12.35% equaling 0.1235. – Currency: A number with a currency symbol as a prefix. – Date: A date following the format mm/dd/yyyy. – Euro date: A date following the European standard dd.mm.yyyy. – Text (numbers only): A sequence of numbers, like a reference number, that isn't interpreted as a numerical quantity.
When the type of content is Currency, choose the currency symbol to use as a prefix from this dropdown menu. If a prefix is missing you can type your own in the box.
With Currency selected, check this box to always show two decimal places.
For integer or decimal inputs, automatically inserts the thousands separator as the user types
Set this to always show a specific number of digits after the decimal point. Extra digits will be filled with 0. Any value will be rounded to the appropriate decimal place before displaying in the input. Leave blank to have no rounding, and no restriction on the number of digits.
Check this box to prevent users from entering long entries.
When the type of content is Date or Euro date, select a type from this dropdown menu to define the timezone type with which you are parsing data. The default timezone with which data is parsed will be the client timezone ("User's current timezone"). However, you can override this option by setting an alternative timezone with a static or dynamic choice.
Both Date and Euro date will be by default parsed as the date at midnight for the client timezone. If you specify a timezone different from the client timezone, then the date will be parsed as that date at midnight in the overriding timezone. As an example, if you parse 1/1/2000 from Eastern Time and keep the default setting, Bubble will save that date as 1/1/2000 12:00 AM Eastern Time. If you instead override the client timezone with Pacific Time, selecting 1/1/2000 will save 1/1/2000 12:00 AM Pacific Time.
Normally, when users click ENTER, workflows associated with the input get triggered/submitted. If you check this box, that will not happen.
Enter the maximum number of characters allowed.
Check this box to restrict the numerical values users can enter.
Set the minimum value users can enter. Make this value dynamic by using the Composer.
Set the maximum value users can enter. Make this value dynamic by using the Composer.
If a password policy is defined in the General section in the Settings Tab, check this box to validate the input against that policy. Advanced: This is useful if you only want to make that check on the server.
Multiline inputs allow users to enter text on several lines.
When this element is empty, text will be displayed to prompt the user to enter something.
This field defines the input before the user modifies it or when reset. For example, when users modify their bio, the initial content will likely be 'Current user's bio.'
Check this box to prevent users from entering long entries.
Enter the maximum number of characters allowed.
Check this box to resize the element when the text becomes too long to fit the container.
Displays a labeled checkbox.
Enter the text to display next to the checkbox. Clicking on the text is equivalent to clicking the checkbox itself.
Define the initial value of the checkbox. Choose from Checked, Unchecked, and Dynamic.
This option is only visible if Preset status is set to Dynamic. Specifying a dynamic yes/no value determines whether this element starts in an on or off state. When the dynamic value changes, e.g., the user modifies data that the dynamic status field references, the checkbox will change to reflect the new value. This continues until the user clicks on the element and changes the state, in which case the state will be determined by their selection rather than by a dynamic value.
When checked, workflows using the content of the checkbox won't run until the content of the box is checked. This is useful, for instance, to force users to accept Terms of Services (ToS) when they sign up.
Dropdowns display a list of a choices to the user through a familiar interface. The choices can either come from the database or be entered in the Bubble Editor as a list of texts.
When this element is empty, text will be displayed to prompt the user to enter something.
A dropdown element either prompts the user to choose one option from static choices or dynamic data from the application database. In this dropdown menu, choose between Static choices or Dynamic choices.
This is the list of static choices offered to users. Enter one option per line and press Enter between each option.
This is the type of thing used by the element when Dynamic choices is chosen in the Choices style.
Define the list of things to be used as options. It should be a list of things of type defined as the 'Type of choices.' It is either the result of a search or the content of a field that is a list.
Define how to display the thing in the dropdown menu. For example, to display users, build an expression like 'Current option's first name Current option's last name' as a caption.
This is the default value displayed in the dropdown menu. It should be of the same type as the type of content defined in 'Type of choices.'
Note: due to how Firefox treats dropdowns, dropdown placeholder text cannot be changed conditionally on Firefox.
This element searches for dynamic options with an autocomplete experience. The users start typing a word or address, and the dropdown menu displays matching options in real time.
When this element is empty, text will be displayed to prompt the user to enter something.
A search box either displays a static list of texts like a list of countries, dynamic data from the application database, or displays addresses using the Google Autocomplete API. Choose from Static choices, Dynamic choices, and Geographic places.
This is the list of static choices offered to users. Enter one option per line and press Enter between each option.
Clicking this button displays a search popup. The search dropdown contains a dynamic list of entries users can search from. Add constraints to restrict the list.
If you set up algolia, you will see a popup like the regular search, in which you can choose the type indexed in Algolia you want to search for.
When choosing a dynamic source of entries, define which field will contain the texts to use for autocompletion. Set this in the 'Field to search' property. For example, to display restaurants in the search box, set the list of options as a 'Search for restaurants' and choose 'Name' as the field to search.
If you choose to search across all the indexed fields, you may choose to display a particular one, or the one that matched your search.
Check this box to allow the user to type something that is not in the dynamic list. Access the typed text as 'Input's typed text.'
Change the maximum number of entries to show in the dropdown. Longer lists take more time to load.
Normally, when users click ENTER, workflows associated with the input get triggered/submitted. If you check this box, that will not happen.
This is the default value to use in the search box. It should be of the same type as the 'Type of choices.'
The point around which you wish to retrieve place information. This is optional.
The distance (in meters) within which to prefer place results.
This element displays a list of buttons where users can choose only one option. The options come either from a list of static choices or dynamic list.
A radio button element can either prompt the user to pick from a list of static choices like states or display dynamic data from the application database. Choose from Static choices and Dynamic choices from this dropdown menu.
This is the list of static choices offered to users. Enter one option per line and press Enter between each option.
This is the type of thing used by the radio button element.
Define the list of things to be used as options. It should be a list of things of type defined as the 'Type of choices.' It is either the result of a search or content of a field that is a list.
Define how to display the thing in the list of radio buttons. For example, to display users, build an expression like 'Current option's first name' as a caption.
This is the default value to determine the selected radio button. It should be of the same type as the 'Type of choices.'
Enter the number of columns for the buttons. The width of the caption will be adjusted automatically to fit the number of columns given the total element width.
Choose the color for the actual radio buttons. Choose from the Twitter Bootstrap library of colors: Black, Primary, Danger, Info, Warning, and Success.
This element allows users to select a value from a numeric range by dragging a slider. It is touch-compatible, so it works on mobile devices.
Enter the minimum value for the slider.
Enter the maximum value for the slider.
This number represents how much one increment should modify the slider's value.
A Simple slider will have one handle and return one number. A Range slider will have two handles and return two numbers. The handle is what the user moves to change the slider value. This setting will appear in the Property Editor when no style is attached. When a style is attached, this setting will instead be adjusted in the Styles tab.
Define the initial value of the slider. If the content is dynamic, it should be of type number.
This property defines whether the slider is Horizontal or Vertical.
Choose the color of the borders of the slider and handle. The handle is what the user moves to change the slider value.
Choose the color of the slider background.
Choose the color of the handle. The handle is what the user moves to change the slider value.
When using Range mode, this property defines the color between the two handles. The handle is what the user moves to change the slider value.
This element allows users to choose a date and optionally a time with a calendar-type interface. The value returned by this element is a date that can be used in date fields.
Select a type from this dropdown menu to define the timezone type with which you are parsing data. The default timezone with which data is parsed will be the client timezone ("User's current timezone"). However, you can override this option by setting an alternative timezone with a static or dynamic choice.
For instance, if you (the client) are in Eastern Time, you can override the timezone by statically or dynamically specifying a new timezone such as Pacific Time. Then, when you enter 1/1/2000 9:00 AM, it will be parsed as 1/1/2000 9:00 AM Pacific Time, rather than 1/1/2000 9:00 AM Eastern Time.
If you are parsing a date (with no time specified), it will be by default parsed as the date at midnight for the client timezone. If you specify a timezone different from the client timezone, then the date will be parsed as that date at midnight in the overriding timezone. As an example, if you parse 1/1/2000 from Eastern Time and keep the default setting, Bubble will save that date as 1/1/2000 12:00 AM Eastern Time. If you instead override the client timezone with Pacific Time, selecting 1/1/2000 will save 1/1/2000 12:00 AM Pacific Time.
Choose from Date and Date & Time to determine if a time will be used in addition to the date.
Define the initial value of the date. It should be of type date and will be red until the entry has the correct type.
By default, the date/time picker shows a placeholder with a date and format selected. To customize it, check this box. Note: This option is only available in Date mode.
Enter the placeholder to use for the date.
From this dropdown menu, choose how to format the date.
If you need to use a custom format for the date, you can define it here.
Check this box to start the week on Monday, which is the European style. By default, the week starts on Sunday.
Check this box to allow users to change the month and year quickly. This is useful for dates in the past, like birthdays.
This property defines how many minutes should exist between two options. Note: This option is only available in Date mode.
From this dropdown menu, choose how to format the time.
Use this field to prevent users from choosing a day before a certain date/time. This field can be dynamic, in which case the expression defined should be of type date (which includes time).
Use this field to prevent users from choosing a day after a certain datetime. This field can be dynamic, in which case the expression defined should be of type date (which includes time).
Use this field to prevent users from choosing a time before a certain hour of the day. This field can be dynamic, in which case the expression defined should be of type number. It must be in 24h format, i.e., 17:26 for 5:26 PM.
Use this field to prevent users from choosing a time after a certain hour of the day. This field can be dynamic, in which case the expression defined should be of type number. It must be in 24h format, i.e., 17:26 for 5:26 PM.
This element allows users to upload an image. When they click the button, they're prompted to choose an image to upload. On mobile devices, the option to take a picture with the phone's camera is also offered. Once the image is uploaded, the button displays the image.
When this element is empty, text will be displayed to prompt the user to enter something.
This field defines the initial content of the picture uploader. It can either be an uploaded static image or dynamic information from the application database, such as 'Current user's picture.'
By default, uploaded files are visible to anyone who has the link to the file. To provide an additional layer of security to files uploaded through this element, select this option. You will be prompted to select a thing to permanently attach the file to. That item can then be used to restrict access to the file via privacy rules.
Note: when uploading to Box, set privacy rules in the Data > Privacy tab.
This option is only visible if 'Make this file private' is selected. Private files uploaded with this element are permanently attached to a thing, which is used to determine who has access to view the file. Only users who have the 'View attached files' permission for that thing can view the file. Go to the Privacy section to create privacy rules that grant this permission. If the value of 'Attach this file to' is empty or the thing does not exist, the file will be visible to anyone who has the link, which is the same as if 'Make this file private' was not selected.
By default, uploaded files are stored by Bubble using Amazon's S3 file hosting service. You can optionally select a third-party storage service instead by adding that service as a plugin. Currently we support one third-party service, Box.
Note: when uploading to Box, set privacy rules in the Data > Privacy tab.
Enter the destination in your Box to upload the file. The destination is a forward-slash (/) separated list of folder names, such as 'My Folder/My Subfolder.' Bubble will automatically create folders if they do not already exist, and dynamic data can be used to build the folder path.
By default, an image uploads without resizing. If the image is large, this may lead to a slower upload. If an image is larger than 800 x 600 pixels, check this box to resize the image to these dimensions.
This element allows users to upload a file. When they click the button, they're prompted to choose a file to upload. Once the file is uploaded, the button displays the file name.
When this element is empty, text will be displayed to prompt the user to enter something.
This field defines the initial content of the file uploader. It can either be an uploaded static image or dynamic information from the application database, such as 'Current user's resume.'
By default, uploaded files are visible to anyone who has the link to the file. To provide an additional layer of security to files uploaded through this element, select this option. You will be prompted to select a thing to permanently attach the file to. That item can then be used to restrict access to the file via privacy rules.
Note: when uploading to Box, set privacy rules in the Data > Privacy tab.
This option is only visible if 'Make this file private' is selected. Private files uploaded with this element are permanently attached to a thing, which is used to determine who has access to view the file. Only users who have the 'View attached files' permission for that thing can view the file. Go to the Privacy section to create privacy rules that grant this permission. If the value of 'Attach this file to' is empty or the thing does not exist, the file will be visible to anyone who has the link, which is the same as if 'Make this file private' was not selected.
By default, uploaded files are stored by Bubble using Amazon's S3 file hosting service. You can optionally select a third-party storage service instead by adding that service as a plugin. Currently we support one third-party service, Box.
Note: when uploading to Box, set privacy rules in the Data > Privacy tab.
Enter the destination in your Box to upload the file. The destination is a forward-slash (/) separated list of folder names, such as 'My Folder/My Subfolder.' Bubble will automatically create folders if they do not already exist, and dynamic data can be used to build the folder path.
Use this field to limit the size of files uploaded from this element. The value will be the maximum number of megabytes. Default is 50 MB. Files as large as 5 GB can be uploaded to Bubble (see comment below), while the Box limit is 50 MB.
While Bubble officially supports file uploads of up to 5 GB, most major browser don't support reliably uploading bigger files than 2 GB. To be safe, you may want to see this as the practical limit.
Article series:
Article series:
Article: Building pages that work on all devices, such as a laptop and a phone.
Article:
Bubble Academy: Bubble Academy: Bubble Academy: Bubble Academy: (list of videos related to elements)
Bubble Academy:
Reference:
Tip: When using the native dropdown element in Bubble, Bubble will use the browser's native dropdown HTML component. This often has very limited styling options and varies from browser to browser. For example, text alignment may not work across all browsers, because not all browsers support that feature for their native dropdowns. To create a more custom dropdown, consider building one using a element.