New Component: Advanced Text Input — Now on the Marketplace! 🎉

[AKyle]

Hey Adalo Community!

I’m excited to share a new component that’s now available on the Adalo Marketplace:

Advanced Text Input

A feature-rich text input with title label, icon, password toggle, clear button, symbol bar, and Magic Text output

A text input with title label, customizable icon, password show/hide toggle, clear button, symbol bar, 5 input types, 5 keyboard modes, multi-line with adjustable height, text alignment, email/password autofill, and real-time Magic Text output.

Key Features

5 input types: Normal, Lowercase, Password, Email, Number
Password show/hide toggle with customizable icons
Clear button — tappable X icon to reset the input (hides when empty)
Optional icon inside the input (left or right) with customizable color and size
5 keyboard modes: Default, Number Pad, Decimal Pad, Phone Pad, Email, URL
Customizable symbol bar for keyboards missing symbols (-, %, $, +, etc.)
Optional title label with font size, weight, color, alignment, and position (top/bottom)
Multi-line mode with adjustable height (30–500px) and scrolling
Input Value available as Magic Text (formValue) — updates on every keystroke
Email and password autofill — iOS/Android suggest saved credentials
Text and vertical alignment: Left/Center/Right + Top/Center/Bottom
Focused border color highlights the active input
Default Value supports Magic Text for pre-filling from database
On Change and On Submit actions
Works on Web, iOS, and Android

Perfect For

• Search bars with live filtering and clear button
• Login forms with password toggle
• Notes and feedback fields
• Currency inputs with symbol bar
• Email fields with autofill
• Multi-line comment boxes

How to Get It

1. Open your Adalo app editor
2. Click the + button to open the Add Components panel
3. Browse Marketplace Components or search for “Advanced Text Input”
4. Click to add it to your app — done!

If you have any questions or feedback, drop a comment below. I’d love to hear how you’re using it!

[diegozane]

@AKyle a couple of bits I’ve noticed.

• Number entry allows multiple decimal points to be added
• Number entry on Web still allows characters to be entered
• I have a formula box to calculate multiple Number inputs, with a “reset” inputs button. Previously the reset button would clear all the number inputs to 0 using another hidden input. My formula box still clears and resets to 0, however the Advanced Text Input boxes do not clear and retain the values entered on screen.

Thanks

[AKyle]

@diegozane

• Number entry allows multiple decimal points to be added
• Number entry on Web still allows characters to be entered

These were intentional to allow for negative numbers or if a comma was wanted to be added, depending on how the information from the component was being used.
Number entry allows multiple decimal points to be added
Number entry on Web still allows characters to be entered

I would need to see the “reset” option to see how it was set up and see if this is a feature that needs to be added.

[Dilon]

@diegozane

I have a formula box to calculate multiple Number inputs, with a “reset” inputs button. Previously the reset button would clear all the number inputs to 0 using another hidden input. My formula box still clears and resets to 0, however the Advanced Text Input boxes do not clear and retain the values entered on screen.

Hi @diegozane, seems like it solves by adding the input value into the default value field.(see below screenshot) But noted for a fix since for built-in inputs doesn’t need to map default values!

Thank you and have a great day!