MARKETPLACE
PLUGINS
EASY DECIMAL INPUT MASK
Easy Decimal Input Mask logo

Easy Decimal Input Mask

Published March 2026
   •    Updated today

Plugin details

Bubble's native decimal input forces a fixed number of decimal places - if you set 4 decimal places, the input always displays values like 12.0000 even when the user only typed 12.
Smart Number Mask fixes this by making decimal places variable. It removes unnecessary trailing zeros so the input shows exactly what the user typed - 12, 12.5, or 12.5521 - while Bubble still stores the full-precision value.

Drop a single element on the page, set a match key, and every matched decimal input gets a clean, natural number display.

Demo URL: https://stein-plugins.bubbleapps.io/version-test/easy-input-mask/1774963630448x676874277564790700

Editor URL: https://bubble.io/page?id=stein-plugins&tab=Design&name=easy-input-mask&type=page&ai_generated=true&elements=bTIHf

Smart Decimal Display
· Automatically strips trailing zeros from Bubble decimal inputs - a value of 12.0000 displays as 12, while 12.50 displays as 12.5
· Preserves the decimal point while the user is actively typing so partial entries like 12. are not disrupted
· Removes trailing dots when the input loses focus for a clean final display

Input Validation
· Enforces numeric-only input - only digits, one decimal point, and an optional leading minus sign are allowed
· Non-numeric characters are stripped automatically as the user types

Batch Targeting
· Targets multiple inputs at once using an ID match key - any input whose HTML ID contains the key is automatically masked
· New inputs added to the page dynamically are picked up automatically without requiring a page refresh
· One plugin element handles all matched inputs on the page

Free

For everyone

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Stein & Company logo
Stein & Company
Joined 2020   •   5 Plugins
View contributor profile

Instructions

Instructions
Step 1 - Add the plugin element
Drag the Smart Number Mask element onto your page. It is invisible at runtime - placement does not matter. You only need one element per page.

Step 2 - Set up your decimal inputs
For each Bubble input you want to mask, set the content format to decimal with 0 decimal places. Give each input an HTML ID that shares a common keyword - for example mask-price, mask-quantity, mask-total.

Step 3 - Configure the match key
In the plugin element's properties, set ID Match Key to the shared keyword from your input IDs. For the examples above, set it to mask. Every input whose HTML ID contains that text will be automatically masked.

Tips & Best Practices
· Choose a match key that is specific enough to avoid targeting unrelated inputs - mask or dm works well
· The plugin handles inputs that appear dynamically (e.g. inside repeating groups) - no extra setup needed
· Bubble still stores the full decimal value regardless of what is displayed, so workflows and calculations are unaffected
· You do not need negative numbers support unless your use case requires it - the plugin allows an optional leading minus sign by default

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:
Technical   •   Data (things)   •   Productivity   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble