GCS Studios
SMS Autofill On Mobile
The code from the SMS appears above the keyboard on iOS and Android and fills every box with one tap.
Why use this?
Built for what Bubble does not cover.
Bubble has no verification code input. Building one by hand means a row of single-character inputs and workflows to move the cursor from box to box, handle backspace, split a pasted code across the boxes and notice when the last one is filled. The phone's SMS autofill rarely survives that setup, because it expects one field that asks for a one-time code.
Key features 6
Paste The Whole Code
Pasting fills all the boxes at once, keeping only the characters the field accepts.
PIN Mode
A dot in place of each typed character, for PINs and codes that should not stay on screen.
Completed Event
Fires the moment the last box is filled, so a workflow can verify the code with no extra click.
Boxes Your Way
1 to 12 boxes, optional groups with a separator, and colors for the empty, filled and active boxes.
Accessible Experience
One real field behind the boxes, named and announced to screen readers, with a visible caret.
In detail
Built for Verification
- SMS one-time code autofill on iOS and Android
- Paste the whole code at once
- Numbers, letters, or both, with automatic letter case
- PIN mode that hides each typed character
- Completed event when all boxes are filled
Fully Customizable
- 20+ properties for complete visual and behavioral control
- 1 to 12 boxes, with optional groups and separator (123-456)
- Background and border colors for empty, filled, and active boxes, with a blinking caret
- Placeholder character for empty boxes
- Seamless integration with native Bubble styles while preserving a consistent appearance across browsers and matching your app design
Smooth User Experience
- Focus on load for sign-in screens
- Leaves focus when the code is complete, closing the keyboard on mobile; tap it again to fix the last character
- Backspace removes the last character
- Handles required and invalid states with customizable styling
- Screen reader ready, with an accessible label and description, and reduced motion support
Workflow Friendly
- Exposed states for the code, whether it is complete, and its validity
- Completed event to verify the code right away, also fired when Set value writes a full code
- Initial value available to your workflows even while the element is hidden
- Set value action to write the code from a workflow, with the option to apply it even when the input is disabled
- 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 for seamless Bubble integration
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 code length, the allowed characters, and the box styling.
-
03
Connect to your workflows
Use the completed event to verify the code as soon as all boxes are filled, and read the exposed states to use them anywhere in your app.
INPUT 7
Use completed to verify the code and value changed to save it. The first fires as soon as the last box is filled; the second fires whenever the code changes and is confirmed, including at that same moment.
Input placeholder character
Character shown in empty boxes (for example • or 0). Empty for none.
One character, shown in every empty box. Its color is Input placeholder color, in the empty state section.
Input placeholder color
Color of the placeholder text.
Code length
Number of characters of the code (1 to 12).
Allowed characters
Characters accepted in each box. Numbers opens the numeric keyboard on mobile.
Numbers also opens the numeric keyboard on mobile. Letters and letters and numbers open the full keyboard.
Text case
Case applied to the letters as they are typed or pasted: uppercase, lowercase, or none to keep them as typed. Only applies when Allowed characters includes letters; numbers are not affected.
Hide typed characters?
Shows a dot in place of each typed character, like a PIN.
Only what is shown is hidden: the `value` state keeps the real code.
Focus on load?
Focuses the first box when the page loads.
BOXES 9
General
Box gap
Space between boxes, in pixels.
Box border radius
Corner radius of each box, in pixels.
Box bg color
Background color of the boxes that are still empty.
Box border color
Border color of the boxes that are still empty.
Box bg color (filled)
Background color of the boxes that already have a character.
Box border color (filled)
Border color of the boxes that already have a character.
Groups
Group size
Adds a separator after every N boxes (3 splits 6 boxes into 3 + 3). 0 for no groups.
The separator is drawn between the boxes and never enters the value.
Group separator
Text shown between groups.
Separator font color
Font color of the group separator.
DEFAULT DATA 1
Default value
Code 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
Box bg color (focused)
Background color of the active box while the input has focus: the one that receives the next character, or the last box when the code is complete.
Box border color (focused)
Border color of the active box while the input has focus: the one that receives the next character, or the last box when the code is complete.
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 6
Values the element exposes for the rest of the page to read.
A partly typed code is invalid even when the input is not required. Empty or complete are the only valid answers.
value
Typed code. Empty when no character was typed.
is complete
True when all boxes are filled.
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 code is incomplete, required or not. 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 2
Where a workflow can start.
value changed
Triggered when the code changes and is confirmed: leaving the input, completing the code, resetting, or when a shorter code length or a new code type trims a code that was already typed or set.
completed
Triggered when all boxes are filled, whether by typing, pasting, SMS autofill or the Set value action. When the person completes the code by typing, the field also leaves focus; clicking it again returns focus to the last box.
Actions 3
What a workflow can tell the element to do.
Reset no params
Restores the default code, or clears the boxes.
Focus no params
Focuses the first empty box.
Set value 2 params
Writes a code into the field from a workflow, keeping only valid characters up to the number of boxes, and refreshes the exposed states. A complete code also triggers the completed event.
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 every box.
FAQ 6
How does the SMS autofill work?
Behind the boxes there is one real input marked as a one-time code field. iOS and Android recognize it and offer the code from an incoming SMS above the keyboard; one tap fills every box. Nothing has to be configured in the plugin, but the SMS has to contain the code in a form the phone recognizes, which most verification services already send.
Can it take letters, or only numbers?
Allowed characters takes numbers, letters, or both. Numbers opens the numeric keyboard on mobile. With letters, Text case turns them to uppercase or lowercase as they are typed, or keeps them as typed. Anything outside the chosen type is ignored, including in a pasted code.
When does the completed event fire, and when does value changed?
completed fires when all the boxes are filled, whether typed, pasted, autofilled from the SMS or written by Set value, which is the moment to verify the code. Completing it by typing also takes the field out of focus, which closes the keyboard on mobile; clicking it again returns focus to the last box to correct it. value changed fires when the code changes and is confirmed: when the person leaves the field, completes the code or resets it, and when a shorter Code length trims a code that was typed or set.
When does the field turn red?
The is valid state follows the code at every keystroke. The red style waits until the person leaves the field, and also shows when a workflow sets a code that is not accepted. An empty field is invalid only when This input is required? is checked; a partly typed code is invalid either way.
Can I split the boxes into groups, like 123-456?
Yes. Group size adds a separator after every N boxes, so 3 splits six boxes into 3 + 3, and Group separator sets the text between the groups. The separator is only visual: the `value` state is the code without it.
Can I set or clear the code from a workflow?
Yes. The Set value action writes a code 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 the first empty box. Focus on load? does the same when the page opens.
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.