GCS Studios
Grows With The Text
With Fit height to content, the field grows line by line up to the Max height and then scrolls inside, with the family scrollbar style.
Why use this?
Built for what Bubble does not cover.
Bubble's native multiline input does not send on Enter, has no line limit and only reports a change when the person leaves the field. A chat box, a comment field or a notes area ends up with a fixed height that scrolls too early, a send button as the only way out, and workflows that cannot react while the person is still typing.
Key features 6
Send On Enter
Enter can trigger the Enter pressed event while Shift+Enter breaks the line, the way chat apps work. On phones Enter always breaks the line.
Limits That Make Sense
Min characters for validation, Max characters and Max lines that stop typing at the limit, and a character counter.
Value Changed While Typing
An option fires value changed as the person types, for live search, autosave and drafts.
Clear Icon And Text Case
A clear icon that keeps Ctrl+Z working, text case including name case, and spell check on or off.
Accessible Experience
A real text area with an accessible label and description, required and invalid states announced to screen readers.
In detail
Grows With the Text
- Grows line by line with Bubble's Fit height to content, then scrolls inside once it reaches the Max height
- Scrollbar styles: hidden, minimal or with arrows, in thin and regular sizes
- Fixed height also supported, with the text scrolling inside
Built for Messages
- Enter inserts a new line, or submits and triggers the Enter pressed event, keeping or leaving the focus, with Shift+Enter for a line break
- On touch devices Enter always inserts a line break, so sending stays on your own button
- Insert text at cursor action, for emojis, mentions and quick replies
- Clear icon that keeps undo working, so Ctrl+Z brings the text back
Fully Customizable
- 20+ properties for complete visual and behavioral control
- Min characters for validation, plus Max characters and Max lines that stop typing at the limit
- Character counter, text case transformation (including name case) and spell check on or off
- Seamless integration with native Bubble styles while preserving a consistent appearance across browsers and matching your app design
Smooth User Experience
- Handles required, invalid, disabled and focused states with customizable styling
- Placeholder with its own color
- Screen reader ready, with an accessible label and description, and reduced motion support
Workflow Friendly
- Exposed states for the value, its length, the line count, validity and focus, updated on every keystroke
- Value changed event on leaving the field, with an option to also fire it as the user types
- Initial value available to your workflows even while the element is hidden
- Set value and Insert text at cursor actions, with the option to apply them even when the input is disabled
- Focus and Reset actions that integrate with native Bubble actions or custom workflows
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 character and line limits, the Enter key behavior, and the scrollbar style.
-
03
Connect to your workflows
Turn on Fit height to content so the field grows with the text, use the value changed event to capture the confirmed text, and the Enter pressed event to send it, and read the exposed states to use them anywhere in your app.
INPUT 13
Turn on Fit height to content in the element's layout so the field grows with the text up to its Max height. Without it the height stays fixed.
General
Input placeholder
Text displayed in the input while it has no value.
Input placeholder color
Color of the placeholder text.
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).
Spell check?
Lets the browser underline misspelled words and suggest corrections, in the languages set in the visitor's browser or system. Turn it off for codes, addresses or technical text.
Limits
Min characters
Minimum number of characters, line breaks included. Below it the input is invalid; it never blocks typing. An empty input stays valid unless it is required. Empty for no minimum.
An empty field stays valid unless This input is required? is checked.
Max characters
Maximum number of characters, line breaks included. It only stops typing past the limit and never makes the input invalid. It also trims the default value and the Set value text, and applies right away when it changes. Use 0 for no limit.
Max lines
Maximum number of lines, counted by line breaks (a long line that wraps counts as one). At the limit Enter adds no line, and pasted, default or Set value text is cut to it. Empty for no limit.
Lines are counted by line breaks. To limit how tall the field gets, use the element's Max height instead.
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.
Scrollbar
Scrollbar style
Look of the scrollbar in the input: hidden (the text still scrolls), minimal (a handle only) or arrows (a handle with an arrow at each end), each in thin or regular width. Firefox shows its own scrollbar for arrows.
INTERACTION 2
Trigger value changed while typing?
Also triggers Value changed as the user types. Unchecked, it triggers only on leaving the input, or on Enter in submit mode.
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.
Enter key behavior
What Enter does. New line inserts a line break. Both submit options keep the text as is and trigger the Enter pressed event, while Shift+Enter inserts the line break: submit keeping focus leaves the cursor in the field for the next message, as in a chat, and submit losing focus leaves the field. On touch devices Enter always inserts a line break, so sending there takes a button that runs your workflow.
On touch devices Enter always inserts a line break, whatever this option says. Sending there is up to a button of your own.
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 7
Values the element exposes for the rest of the page to read.
line count counts line breaks, not wrapped lines, so it matches what Max lines limits.
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, line breaks included.
line count
Number of lines in the text, counted by line breaks (a long line that wraps counts as one). 0 when empty.
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 shorter than Min characters. 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 text is confirmed with a different value: leaving the input, pressing Enter in submit mode, typing when Trigger value changed while typing is checked, resetting, Set value or Insert text at cursor, or when a change to the case, line limit or character limit adjusts a text that was already typed or set.
Enter pressed
Triggered when Enter is pressed with Enter key behavior set to one of the submit options. Shift+Enter inserts a line break instead and does not trigger it, and neither does Enter on touch devices, where it always inserts a line break.
Actions 4
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 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.
Insert text at cursor 2 params
Inserts text at the cursor, replacing the selected text, or at the end when the input was never focused. Only the part that fits Max characters and Max lines is inserted, and the input gets the focus back with the cursor after it.
Apply even when disabled?
Yes applies the value even while the element is disabled. No makes the action do nothing in that state.
Text
The text to insert. It goes through the same treatment as typed text.
FAQ 6
How do I make the field grow with the text?
Turn on Bubble's Fit height to content on the element and set a Max height. The field starts at its height, grows one line at a time as the person types and, once it reaches the Max height, keeps that height and scrolls inside. Without Fit height to content the height stays fixed and the text scrolls from the start. Scrollbar style sets how the scrollbar looks in both cases.
How do I send the message on Enter?
Set Enter key behavior to submit keeping focus, the usual choice for a chat, or to submit losing focus when the person sends once and moves on. Enter then keeps the text as it is and triggers the Enter pressed event, where your workflow sends the message and can call Reset to clear the field. Shift+Enter still inserts a line break. On touch devices Enter always inserts a line break, because the phone keyboard has no Shift, so give the page a send button there.
When does value changed fire?
By default, when the person leaves the field with a different text, and when Enter is pressed in submit mode. With Trigger value changed while typing? checked, it also fires as the person types. It also fires on Reset, Set value and Insert text at cursor, and when a change to the text case or to a limit adjusts a text that was already there.
What is the difference between Min characters, Max characters and Max lines?
Min characters only validates: below it the field is invalid, but typing is never blocked. Max characters and Max lines only block: they stop typing past the limit and never make the field invalid. Line breaks count as characters, and Max lines counts line breaks, so a long line that wraps counts as one.
Can I insert an emoji or a mention where the cursor is?
Yes. The Insert text at cursor action writes text at the cursor position, replacing the selection when there is one, and respects the limits. It is meant for emoji pickers, mentions and quick replies. Set value replaces the whole text instead.
Can the person undo after clicking the clear icon?
Yes. The clear icon removes the text the same way a selection and Delete would, so Ctrl+Z, or Cmd+Z on a Mac, brings it back. It shows only while the field has a value, aligned with the first line, and is off by default: turn on Display clear icon? to use it.
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.