Bubble Docs
  • Introduction
  • New? Start Here
  • What is Bubble?
  • The Glossary
  • User manual
    • Getting started
      • What is Bubble?
      • Building your first app
        • Planning features
        • Database structure
        • Design and UX
        • eCommerce and payments
          • Shopping cart
          • Checkout page
          • One-time payments
          • Subscriptions
          • Marketplace
      • Creating and managing apps
      • The Bubble editor
        • Tabs and sections
          • Design tab
            • The element tree
            • The property editor
          • Workflow tab
          • Data tab
          • Styles tab
          • Plugins tab
          • Settings tab
            • Application settings
              • Custom headers/body
              • Visual settings
              • Social media sharing
              • Translating your app
              • Email settings
              • Collaboration
            • Custom domain and DNS
          • Logs tab
        • Tools
          • Key features
          • The search tool
          • The Issue Checker
          • The element tree
          • The element property editor
          • The debugger
          • Notes
        • Previewing your app
      • Transitioning to Bubble from...
        • JavaScript
        • HTML and CSS
        • SQL
    • Design
      • Elements
        • The element hierarchy
          • The element tree
        • The page
        • Containers
          • Groups
          • Repeating groups
          • Table elements
          • Popups
          • Floating groups
          • Group focus
        • Visual elements
        • Input forms
          • Text and numbers
          • Dates and time
          • File uploads
          • Selection controls
        • Reusable Elements
      • Styling
        • Color variables
        • Font variables
        • Styles
        • Custom Fonts
      • Responsive design
        • Building responsive pages
        • Legacy articles
          • The Basics (Legacy)
          • Building Responsive Pages (Legacy)
          • Migrating Legacy Pages
          • Tips When Designing (Legacy)
      • Templates
      • The Component Library
      • Importing from Figma
    • Data
      • The database
        • Data types and fields
        • Creating, saving and deleting data
        • Finding data
        • Displaying data
        • Protecting data with privacy rules
        • The database editor
        • Export/import data
          • Exporting data
          • Importing data (CSV)
        • Working with location data
        • Using Algolia
        • Database structure by app type
          • Marketplace Apps
          • Directory & Listings Apps
          • Social Network Apps
          • SaaS Apps
          • Project Management Apps
          • CRM Apps
          • Professional Services Apps
          • On-demand Apps
          • Documentation/ CMS Apps
          • Applicant Tracking System (ATS) Apps
          • Portfolio Apps
          • Gallery Apps
          • Online Store / Ecommerce Apps
          • Blog Apps
          • Messaging App
          • Dashboards
          • Building Block Apps
          • Bubble as a backend
      • Files
      • Images
      • Static data
        • App texts (translations)
        • Option sets
      • Temporary data
        • Custom states
        • URL parameters
      • User accounts
        • Authentication plugins
          • Facebook plugin
          • Fitbit plugin
          • Google plugin
          • Instagram plugin
          • LinkedIn plugin
          • Pinterest plugin
          • Slack plugin
          • Wistia plugin
          • YouTube plugin
        • Cookies set by Bubble
      • Time, dates and time zones
    • Logic
      • The frontend and backend
      • Workflows
        • Events
          • Frontend events
            • Recurring workflows
            • Custom events
          • Backend events
            • Database trigger events
        • Actions
        • API Workflows
      • Dynamic expressions
      • Conditions
      • Navigation
        • Single-page applications (SPA)
        • Multi-page applications
        • Page slugs
    • Workload
      • Understanding workload
        • Activity types
        • The workload calculation
        • Client-side and server-side processing
      • Tracking workload
        • Measuring
          • Using App Metrics
        • Monitoring
          • Workload notifications
          • Infinite recursion protection
      • Optimizing workload
        • Optimization framework
        • Optimization checklist
          • Page load
          • Searches
          • Workflows and actions
          • Backend workflows
        • Agency showcases
          • Minimum Studio
          • Neam
          • Support Dept
    • Security
      • Bubble's security features
      • Planning app security
      • Client-side and server-side
      • Bubble account security
      • App security
      • Page security
      • Database security
      • API security
        • API Connector security
        • Data API security
        • Workflow API security
      • Flusk
        • Overview
        • Flusk plan features
        • Getting started with Flusk
        • Flusk security tools
          • The Issues Explorer
          • Issue details
          • Tools and settings
            • Pages rating
            • Database rating
        • Flusk FAQ
      • Cookies
      • Security checklist
    • Publishing your app
      • Web app
      • Native mobile app
        • Global native mobile settings
        • iOS App Store
        • Google Play Store
        • Publishing FAQ
    • AI
      • Generate apps with AI
        • About AI app generation
      • AI page designer
      • Connect to AI agents
    • Maintenance
      • Collaborators
      • Version control
        • Best practices: Version control
        • Transitioning from the legacy version control
        • Terminology: Version control
        • Version Control (legacy)
      • Commenting
      • Database maintenance
        • Copying the database
        • Restoring database backups
        • Bulk operations
          • Bulk operation methods compared
        • Wiping change history
      • Performance
        • Hard limits
        • Capacity Usage (legacy)
        • Notes on queries
      • SEO
        • Introduction to SEO
        • SEO: App
        • SEO: Page
      • Testing and debugging
        • Introduction to testing and debugging
        • The debugger
        • The server logs
        • Supported browsers
      • API workflow scheduler
    • Integrations
      • API
        • Introduction to APIs
          • What is a RESTful API?
        • The Bubble API
          • Bubble API terminology
          • Authentication
            • How to authenticate
            • No authentication
            • As a User
            • As an admin
          • The Data API
            • Data API Privacy Rules
            • Data API endpoints
            • Data API requests
          • The Workflow API
            • Workflow API privacy rules
            • Workflow API endpoints
            • API workflows
              • Creating API workflows
              • Scheduling API workflows
              • Recursive API workflows
              • API Workflow Scheduler
              • Case: Stripe notifications
        • The API Connector
          • Authentication
          • API Connector security
          • API guides
            • OpenAI
              • Authentication
              • Calls
                • ChatGPT
                  • Chat
            • Google Translate
              • How to setup Google API keys
          • Streaming API
        • API security
        • Plugins that connect to APIs
        • API Glossary
      • Plugins
        • What Plugins Can Do
        • Installing and using Plugins
        • Authentication plugins
        • Special Plugins
      • SQL Database Connector
      • Bubble App Connector
      • WorkOS
        • WorkOS SSO
        • WorkOS API
    • Infrastructure
      • Sub-apps
      • Bubble release tiers
      • Hosting and scaling
        • How Bubble hosting works
        • Scaling with Bubble
        • CDN (Cloudflare)
        • Bubble app names
        • Domain and DNS
      • Compliance
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks and standards
    • Bubble for Enterprise
      • Hosting and infrastructure
        • Dedicated instance
          • The Dedicated editor experience
          • Technical specs
          • Main cluster dependencies
          • Customizable options
          • Migration process
            • Pre-migration
            • During migration
            • Post-migration
      • Security and compliance
        • Single sign-on (SSO)
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks
        • Bubble's security features
      • Admin and collaboration
      • Priority support
      • Billing and Payment Guideline for Dedicated Instances
  • Core Reference
    • Using the core reference
    • Bubble's Interface
      • Design tab
      • Design tab (Legacy)
      • Workflow tab
      • Data tab
      • Styles tab
      • Styles tab (Legacy)
      • Plugins tab
      • Settings tab
      • Logs tab
      • Template tab
      • Toolbar
      • Top and context menu options
      • Deployment and version control
        • Deployment & Version Control Dropdown (legacy)
      • Notes
    • Elements
      • General properties
      • General properties (Legacy)
      • Styling properties
      • Styling Properties (Legacy)
      • Responsive Properties
      • Responsive Properties (Legacy)
      • Conditional formatting
      • States
      • Page Element
        • Page Element (Legacy)
      • Visual Elements
      • Containers
      • Container Layout Types
      • Containers (Legacy)
      • Input Forms
      • Reusable Elements
      • Element Templates (legacy)
    • Workflows
    • Events
      • General events
      • Element events
      • Custom events
      • Recurring event
      • Database trigger event
    • Actions
      • Account
      • Navigation
      • Data (things)
      • Email
      • Element
      • Custom
    • Data
      • Data Sources
      • Operators and comparisons
      • Search
      • Privacy
    • Styles
    • API
      • The Bubble API
        • The Data API
          • Authentication
          • Data API endpoints
          • Data API requests
        • The Workflow API
      • The API Connector
        • Authentication
        • Adding calls
    • Bubble-made Plugins
      • AddtoAny Share Buttons
      • Airtable
      • API Connector
      • Blockspring
      • Box
      • Braintree
      • Bubble App Connector
      • Chart.js
      • Circle Music Player
      • Draggable Elements
      • Dropzone
      • Facebook
      • Fitbit
      • Full Calendar
      • Google
      • Google Analytics
      • Google Optimize
      • Google Places
      • Ionic Elements
      • iTunes
      • Slidebar Menu
      • LinkedIn
      • Localize Translation
      • Mixpanel
      • Mouse & Keyboard Interactions
      • Multiselect Dropdown
      • Progress Bar
      • Rich Text Editor
      • Rich Text Editor (Legacy)
      • Screenshotlayer
      • SelectPDF
      • Slack
      • Segment
      • Slick Slideshow
      • SQL Database Connector
      • Star Rating
      • Stripe
      • Tinder-like Element
      • Twitter
      • YouTube
      • Zapier
    • Application Settings
      • App plan
      • General
      • Domain / email
      • Languages
      • SEO / metatags
      • API
      • Collaboration
      • Sub-apps
      • Versions
  • Account & Marketplace
    • Account and billing
      • Pricing and plans
        • Plans and billing
        • Billing cycle
        • FAQ: Pricing and Workload
      • Account Management
      • Building Apps for Others
      • Selling on the Marketplace
      • Plans & Billing (legacy)
    • Official Bubble Certification
      • Hiring certified developers
    • Building Plugins
      • The Plugin Editor
      • General Settings
      • Updating to Plugin API v4
      • Adding API Connections
      • Building Elements
      • Building Actions
      • Loading Data
      • Publishing and versioning
      • Github Integration
    • Building Templates
    • Application and data ownership
    • Marketplace policies
    • Bug reports
  • Vulnerability Disclosure Policy
  • Beta features
    • About the Beta features section
    • Native mobile apps 🔒
      • Introduction
        • What is a native mobile app?
        • Native mobile vs. web development
        • Differences in native and web elements
        • Native mobile app terminology
      • Building
        • Views and navigation
        • Native mobile actions
        • Components and gestures
        • Device resources
          • Location services
          • Camera/photo library
      • Previewing
      • Publishing
Powered by GitBook
On this page
  • Input elements
  • Text
  • Email
  • Password
  • Integer
  • Decimal
  • Address
  • US phone
  • Percentage
  • Currency
  • Date
  • Euro date
  • Text (numbers only)
  • Multiline input
  • Rich Text Editor
  • Hidden toolbar
  • More ways to learn

Was this helpful?

  1. User manual
  2. Design
  3. Elements
  4. Input forms

Text and numbers

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

Last updated 1 year ago

Was this helpful?

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.

Hidden toolbar

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.

More ways to learn

Core reference: text input
Video lessons

The Rich Text Editor is a plugin. It's made by Bubble but it needs to be installed in your app before you can use it. Plugin link:

Reference:

Rich text Editor
How to use the text input element
How to use text transform operators
Guide to BBCode
BBCode tags reference
plugins
Input Element
Input Element
The Rich Text Editor plugin lets your users add advanced formatting to their text.