GCS Studios
Masks That Switch By Length
Masks for documents, codes and phones, with several masks in one field chosen by the length typed, like CPF and CNPJ.
Why use this?
Built for what Bubble does not cover.
Bubble's native text field is one type of a generic input that also does numbers, passwords, phones and others. It has formats for plain text, digits only and email, but no URL, no input mask, no way to clean what is typed, and no way to hide a document number once it is filled in. Masks and clean-up end up as workflows that run after the fact, and the person sees the raw text until they do.
Key features 6
Email And URL Validation
Email and URL checked as they are typed, with allowed and blocked domain lists and a pattern of your own.
Typo Suggestions
A clickable "Did you mean" when the email domain looks like a typo, such as gmial.com or .con.
Clean Text, Live Or Later
Remove accents, numbers and special characters, collapse spaces and fix the case, while typing or only in a state.
Hidden Characters
Show a document number as •••-••-1234 when the field is not focused, keeping the first or the last characters.
Accessible Experience
Fully operable from the keyboard and announced to screen readers, including the email suggestion.
In detail
Masks & Normalization
- Input masks for any document or code, such as 999.999.999-99 and AAA-9999, switching masks by length
- Hide characters when not focused, showing the first or last N (•••-••-1234)
- Text normalization, such as removing accents, numbers, or special characters, and collapsing spaces, live or on the side
- Name case that capitalizes after hyphens and apostrophes (Ahmed El-Maghrebi)
Smart Validation
- Content formats, such as plain text, numbers only, email, and URL, each with the right mobile keyboard
- Custom validation pattern (regex)
- Allowed and blocked email domains, including subdomains
- Domain typo suggestions such as gmial.com to gmail.com, applied with one click
Fully Customizable
- 40+ properties for complete visual and behavioral control
- Text case transformation, such as uppercase, capitalize, and name case
- Character limit with an optional counter
- Clear icon and input icon library with filled and outline versions
- Seamless integration with native Bubble styles while preserving a consistent appearance across browsers and matching your app design
Smooth User Experience
- Input icon on the left or right side
- Browser autocomplete support
- Handles required and invalid states with customizable styling that integrates with Bubble styles
- Screen reader ready, with an accessible label and description, and reduced motion support
Workflow Friendly
- Exposed states for the value, normalized, unmasked, and display versions, removed characters, length, and the suggested email, updated on every keystroke so searches and conditions react as the user types
- Initial value available to your workflows even while the element is hidden
- Focus action that can be triggered from anywhere for full workflow control
- Reset action with flexible behavior that integrates with native Bubble actions or custom workflows
- Value changed event on leaving the field, with an option to also fire it as the user types
Reliable & Production-Ready
- Built with lightweight CSS and JavaScript for fast, reliable performance
- Designed around practical use cases and real Bubble development needs
- Tested in real-world applications before being released publicly
- Created to extend Bubble with functionality and customization beyond what native Bubble elements typically offer
How to use 3
-
01
Insert the element on the page
Place the plugin element wherever you need it.
-
02
Configure the properties
Adjust the settings to match your use case, including the content format, the mask, the normalization, and the validation rules.
-
03
Connect to your workflows
Use the value changed event to capture the confirmed text and read the exposed states to use them anywhere in your app.
INPUT 16
The text is published in several shapes at once, and they are not interchangeable. Store value (normalized) or value (unmasked) when you need the clean version; show value (display) wherever the hidden characters should stay hidden.
General
Input placeholder
Text displayed in the input while it has no value.
Input placeholder color
Color of the placeholder text.
Content format
Validation applied to the text. Numbers accepts digits only; email and url check the format; each one adjusts the mobile keyboard.
Each format also sets the mobile keyboard: numbers opens the numeric pad, email adds the @ key and url adds the slash and .com keys.
Text case
Case transformation applied while typing. Capitalize raises the first letter of each word; name case also lowers the rest and raises letters after hyphens and apostrophes (ahmed el-maghrebi > Ahmed El-Maghrebi). Email always uses lowercase.
Name case lowers the rest of each word and raises the letter after a hyphen or an apostrophe, so `o'connor` becomes `O'Connor` and `el-maghrebi` becomes `El-Maghrebi`.
Browser autocomplete
Whether the browser can suggest saved values.
Character limit
Max characters
Maximum number of characters, counting the fixed characters of the mask. It also trims the default value and the Set value text, and applies right away when it changes. Use 0 for no limit.
Display character counter?
Shows the typed and maximum characters (12/100) inside the input.
Counter font color
Font color of the character counter.
Clear icon
Display clear icon?
Shows an icon that clears the input while it has a value.
Clear icon class
Icon used to clear the input.
Clear icon color
Color of the clear icon.
Input icon
Display input icon?
Controls whether the input icon is displayed.
Input icon class
Icon displayed in the input.
Input icon size
Icon size in pixels. When empty, it is calculated from the input font size.
Input icon color
Color of the input icon.
Input icon placement
Whether the icon appears to the left or right of the input text.
FORMATTING 12
Normalization
Remove accents?
Replaces accented letters with the plain letter (José > Jose, ç > c).
Remove numbers?
Removes digits from the text.
Remove special characters?
Removes characters that are not letters, digits or spaces, except the allowed ones.
Allowed special characters
Special characters kept when special characters are removed, typed together (for example -'.).
Collapse spaces?
Turns repeated spaces into one and removes spaces at the start; spaces at the end are removed when leaving the input.
Normalize while typing?
Shows the normalized text in the input while typing. When off, the input keeps what was typed and the value (normalized) state holds the normalized text.
Off, the field keeps the text exactly as typed and only `value (normalized)` is cleaned. Useful when the person needs to see what they wrote, such as a name with accents, while your database gets the plain version.
Mask
Mask
9 = digit, A = letter, * = letter or digit; other characters are fixed. Separate masks with | to switch by length (999.999.999-99|99.999.999/9999-99). Empty for no mask.
`9` is a digit, `A` is a letter and `*` is either; other characters are fixed. With several masks separated by `|`, the field switches by the length typed.
Use mask as placeholder?
Shows the first mask as the placeholder, with _ in place of each character (___.___.___-__).
Hidden characters
Hide characters when not focused?
Hides the letters and digits of the value while the input is not focused, like a document number (•••-••-1234). Fixed characters stay visible.
Only what is shown is hidden: `value` and `value (unmasked)` keep the full text, and `value (display)` holds the hidden version.
Visible characters
How many letters or digits stay visible.
Visible characters position
Whether the visible characters are the last or the first ones.
Hiding symbol
Symbol shown in place of each hidden character.
VALIDATION 6
Pattern
Validation pattern (regex)
Regular expression the value must match to be valid. Leave empty to skip.
Allowed domains (press Enter between each domain)
Only these domains are valid. Leave empty to accept any domain.
One domain per line, pressing Enter between them. A domain covers its subdomains, so `company.com` also accepts `mail.company.com`.
Blocked domains (press Enter between each domain)
These domains are always invalid.
Suggest domain corrections?
Suggests the right domain when the typed one looks like a typo (gmail.con becomes gmail.com).
Suggestion label
Text of the suggestion. {email} is replaced by the suggested address.
Suggestion font color
Font color of the suggestion.
INTERACTION 1
Trigger value changed while typing?
Also triggers Value changed as the user types. Unchecked, it triggers only on leaving the input or on Enter, like Bubble's native input.
A search bound to this element's value already updates as the person types, without this option. Check it when the filter, autosave or counter runs through a workflow.
DEFAULT DATA 1
Default value
Value applied on load and on reset.
INPUT BEHAVIOR 9
Disabled state
This input is disabled?
Disables the component, preventing any interaction.
Input bg color (disabled)
Input background color when disabled.
Input border color (disabled)
Input border color when disabled.
Input font color (disabled)
Input font color when disabled.
Required state
This input is required?
Marks the field as required and enables input validation.
Input bg color (invalid)
Input background color when invalid.
Input border color (invalid)
Input border color when invalid.
Focused state
Input bg color (focused)
Input background color when focused.
Input border color (focused)
Input border color when focused.
ACCESSIBILITY 2
Accessible label
Name read by screen readers. When empty, uses the placeholder or the visible label.
Accessible description
Hint read by screen readers after the name. Empty for none.
States 11
Values the element exposes for the rest of the page to read.
An optional input can still be invalid: once there is text, it has to fit the mask, the content format, the validation pattern and the email domain lists.
Every state updates on each keystroke, so texts, conditions and searches bound to it react as the person types, with no workflow and without waiting for the field to lose focus. For a database search over a large list, consider feeding it from the value changed event instead, so the search runs once per pause or on confirming rather than on every keystroke.
value
Current text.
value length
Number of characters typed.
suggested value
Suggested email when the domain looks like a typo. Empty otherwise.
value (normalized)
Text after the normalization options (accents, numbers, special characters, spaces).
removed characters
Characters removed by the normalization since the input was last cleared or reset.
value (unmasked)
Value without the fixed characters of the mask (123.456.789-09 > 12345678909). Same as value without a mask.
value (display)
Value as shown when not focused, with the hidden characters replaced (•••-••-1234). Same as value when hiding is off.
is clickable
True when the component is not disabled.
is required
True when the input is marked as required.
is valid
True when the value is accepted. False when it is required and empty, or the value does not fit the mask, the content format (numbers, email, url), the validation pattern, or the allowed and blocked email domains. It updates on every change, so a workflow can rely on it; the invalid style only shows after the person leaves the field, or when a workflow sets the value.
is focused
True while the input has focus.
Events 1
Where a workflow can start.
value changed
Triggered when the text is confirmed with a different value: leaving the input, pressing Enter, typing when Trigger value changed while typing is checked, clearing or resetting, or when a change to the case, format, mask or character limit adjusts a text that was already typed or set.
Actions 3
What a workflow can tell the element to do.
Reset no params
Restores the default value, or clears the input when there is none.
Focus no params
Focuses the text input.
Set value 2 params
Writes a value into the field from a workflow and refreshes the exposed states.
Apply even when disabled?
Yes applies the value even while the element is disabled. No makes the action do nothing in that state.
Value
The value to write into the field. It goes through the same treatment as a value typed by the user. An empty value clears the field.
FAQ 6
What exactly do I get back while someone types?
Several states at once. `value` is the text in the field. `value (normalized)` is the text after the normalization options, even when the field shows what was typed. `value (unmasked)` drops the fixed characters of the mask (`123.456.789-09` becomes `12345678909`). `value (display)` is what the field shows when it is not focused, with the hidden characters in place. `value length` counts the characters, and `removed characters` lists what the normalization took out.
How do masks work, and can one field take two documents?
In a mask, `9` is a digit, `A` is a letter and `*` is either; anything else is fixed and typed for the person. Separate masks with `|` and the field picks one by the length typed, so `999.999.999-99|99.999.999/9999-99` takes a CPF and switches to a CNPJ when the person keeps typing. The value is only valid once a mask is complete.
Does it validate email and URL, or only the format?
The format, plus your own rules. Content format checks that an email has a name, an `@` and a domain with an extension, and that a URL has a domain with an extension, followed or not by a path. For email, Allowed domains accepts only the domains you list, subdomains included, and Blocked domains rejects the ones you list. Validation pattern adds a regular expression of your own for anything else.
When does the field turn red?
The is valid state follows the value at every keystroke, so a workflow can rely on it to enable a button. The red style waits until the person leaves the field, so it never flags a value that is still being typed, and it also shows when a workflow sets a value that is not accepted. An empty field is invalid only when This input is required? is checked; text that does not fit the format, the mask or the pattern is invalid either way.
Can I keep what the person typed and still save a clean version?
Yes. Turn off Normalize while typing? and the field keeps the text as typed, while `value (normalized)` holds the cleaned version for your database. Turned on, the field shows the cleaned text as it is typed.
Can I set or clear the text from a workflow?
Yes. The Set value action writes text from anywhere in your app, with control over whether it applies while the input is disabled; Reset returns the field to its default value; and Focus puts the cursor in it. The value changed event fires when the person confirms a new text, by leaving the field or pressing Enter, or, with Trigger value changed while typing? checked, as the person types, for filters that run through a workflow. It also fires when a change to the case, format, mask or character limit adjusts a text that was already typed or set.
NWD UI - Input
This plugin is maintained by GCS Studios and is part of the NWD UI - Input family, form controls built from scratch for Bubble, inspired by a personal component library originally built for React. Each one is carefully designed and tested in real applications before release, for the level of control, polish and reliability that native Bubble inputs often do not provide. See more plugins on the GCS Studios contributor page.
Each control here is drawn by the plugin instead of being restyled from a native one, so they match each other across the library and keep the same shape in every browser.