Input forms (web)

This section covers Input forms. These are element that accept data input from a user such as text, numbers, dates, uploads and dynamic content.

Input forms are how you collect information from your users. They range from simple text fields and checkboxes to more advanced controls like date pickers, dropdowns, and file uploaders.

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.

Bubble includes a wide range of built-in input types for common needs. If you need something more specialized, the plugin store offers additional inputs from Bubble and the community.

Categories of input

User input can mean many things, and most apps combine several input types to make forms easy to fill out and to collect data in the right format.

Category	Purpose	Examples
Text and numbers	Collect written or numerical values, from short entries like names and email addresses to long-form content like descriptions. Supports plain and rich text.	Text input, multiline input, number input
Dates and time	Collect date and time values.	Date/time picker, date range picker
File uploads	Let users upload files.	File uploader, image uploader
Selection controls	Present pre-defined options for the user to choose from, either static or dynamic.	Checkbox, radio button, dropdown, sliding switch

Combining inputs into forms

Most real interfaces combine several inputs into a single form. A signup form, for example, typically includes text inputs for a name and email, a password input, and a submit button. A checkout form might combine text inputs, dropdowns, and a date picker.

A simple signup form like the one above combines several different categories of input forms to make the UI easy for your users to understand and to prepare the data for processing – such as saving it in the database.

There's no dedicated "form" element in Bubble. Forms are built by placing multiple inputs inside a container (usually a group) and setting up a workflow that reads their values when the user submits.

A common pattern:

1. Place the inputs inside a group.

2. Give the group a Type of content that matches the record being created or edited, such as User.

3. Add a Submit button below the inputs.

4. Set up a workflow that runs when the button is clicked, referencing the inputs' values to create or update the record.

This makes forms easy to organize, style, and reset as a unit.

Input values

Referencing input values

Every input element has a value that can be referenced in expressions. For example, Input Email's value returns whatever the user has typed into the email input.

Input values are used in:

• Workflows. Actions like Create a new thing or Make changes to a thing can pull values directly from inputs to save them to the database.

• Expressions. Text elements, conditions, and other inputs can reference the value of another input to display or react to it.

• Conditions. Element visibility, styles, and behavior can respond to what the user has typed.

Setting initial content

Most inputs support an Initial content setting, which populates the input with a value when the page loads. This is useful for edit forms, where the current data should be pre-filled so the user can update it.

For example, an "edit post" form might load with Parent group's Post's excerpt as the initial content in the excerpt input.

Initial content is dynamic, so it updates automatically if the underlying data changes.

Triggering a workflow when an input is changed

If you want to save data immediately when an input's value is changed, you can also use auto-binding.

You can trigger a workflow whenever the value of an input changes, using the An input's value is changed event. This is useful for real-time actions, such as saving changes to the database whenever the value changes.

Using the An input's value is changed event, you can trigger a workflow immediately when the value of an input form changes.

Workflows can also be triggered by clicking submit buttons, pressing Enter inside an input, or interacting with any other element in the form.

Resetting inputs

The Reset relevant inputs action returns each input to its original state, which may include a default value rather than clearing it entirely.

The Reset relevant inputs action resets all inputs used in the current workflow, returning them to empty or to their default values. This is useful after submitting a form, so the fields are ready for the next entry.

The reset relevant inputs action returns each input used in the workflow to its original state.

Alternatively, resetting a group with Reset a group/popup clears every input inside the group at once, regardless of which workflow they were used in.

Validation and required fields

Inputs support validation to help ensure users provide the right kind of data. Options include:

• Content format. Restricting an input to a specific format, such as email, integer, decimal or password.

• Required fields. Marking inputs as required, which prevents submit buttons from running workflows until the required inputs are filled.

• Min and max values. Setting numerical or date limits for what the input accepts.

Use the Format property to set an input format. The example above shows a text input element.

Validation is a UI convenience and helps guide users to fill out forms correctly, but it isn't a security measure. Data sent to the server should still be validated server-side.

Auto-binding

Auto-binding is a feature that saves an input's value directly to the database as the user changes the value, without needing a workflow to trigger the save. It's a fast way to build "always saved" experiences, where changes are persisted automatically instead of waiting for a submit button.

How auto-binding works

When auto-bind is enabled on an input, three things need to be in place:

1. The input sits inside a container with a Type of content set to the record being edited, such as Current User.

2. The input's Field to modify property is configured to save to a specific field on that record.

3. The relevant privacy rules allow auto-binding on that field.

Auto-binding lets you automatically save changes to the database as the input's value changes.

Once these are set, any change to the input value is written straight to the database. There's no need for a Save button or a workflow to handle the update.

When to use auto-binding

Auto-binding works best in scenarios where you want fields to be saved instantly as the user interacts with input elements. You cannot create new things with auto-binding, only make changes to existing ones.

For forms that need to be validated before saving, or where the user should have a chance to review changes, a standard workflow with a submit button is usually a better fit.

Auto-binding and privacy rules

Auto-binding is controlled by privacy rules. For a field to be editable through auto-bind, the current user must match a privacy rule that grants auto-bind access to that specific field.

Auto-bind privacy rules controls what fields a user who matches the rules can edit.

This gives you fine-grained control over which fields can be edited through auto-binding, even when the data itself is visible. For example, a user might be able to view a shared document but only auto-bind edits to fields they own.

Things to keep in mind

• Changes are saved instantly. There's no confirmation step, so undoing an accidental change means restoring the previous value manually.

• Every change is a database write. Rapidly changing inputs can generate a lot of workload. For inputs that update frequently, consider using a workflow that saves on blur or after a short delay instead.

• Auto-binding is web-only. On native mobile, values need to be saved through workflows.

Input forms and security

Inputs can be disabled through the This input is disabled property, which makes them read-only in the UI. This is a display setting, not a security control.

For real security, use privacy rules to control who can see and modify data in the database, and add server-side conditions to your workflows so sensitive actions only run when the user is authorized.

Article series: Security Article: Client-side and server-side

FAQ: Input forms

How do I read the value of an input?

Use an expression like Input Email's value. Every input has a value that can be referenced in workflows, expressions, and conditions.

How do I pre-fill an input with data?

Use the Initial content property to set a default value. This can be static text or a dynamic expression, such as Current User's name. When auto-bind is enabled, the initial content is populated automatically from the auto-bound field.

How do I clear an input after the user submits a form?

Add the Reset relevant inputs action to the workflow that runs when the form is submitted. It clears all inputs used in that workflow. To clear every input in a group at once, use Reset a group/popup on the containing group.

Can I trigger a workflow every time the user types?

Yes. Use the An input's value is changed event to run a workflow every time the input's value updates. Bubble triggers this event automatically as the user types.

Be careful when running workflows on every input change. The event can trigger very frequently, which can quickly generate a high number of workflow runs, consume workload, and slow down the user experience.

How do I make an input required?

Enable the This input should not be empty option in the input's properties. When the input is empty, workflows that depend on it won't run until it's filled.

Can I validate the format of a text input?

Yes. Set the Content format property to restrict the input to a specific format. Validation runs client-side and gives immediate feedback in the UI.

For more advanced validations, use conditions.

How do I save the value of an input to the database?

Use a workflow triggered by the submit button. Add a Create a new thing or Make changes to a thing action, and reference the input's value in the field you want to save, such as Input Email's value.

Can I autosave inputs as the user types?

Yes. Use the An input's value is changed event to run a Make changes to a thing action every time the input value changes. Alternatively, enable auto-bind on the input to save the value automatically to the parent group's thing.

Can I disable an input based on a condition?

Yes. Add a condition to the input that sets This input is disabled to yes when the condition is true. Remember that disabling is a UI control, not a security measure.

How do I combine multiple inputs into a form?

Place the inputs inside a group with a Type of content matching the record you want to create or edit. Add a submit button that runs a workflow to save the inputs' values to the database.

Are input elements the same in web and native mobile apps?

Most input types are available on both platforms, but some inputs and options are specific to one. Refer to the article on mobile inputs for details on how they differ.

Other ways to learn

Video lessons

• How to trigger workflows from input changes