.png)
Note: This extension supports all block-based app development platforms like App Inventor | Thunkable | Kodular | Nitron | Makedroid | apppie and others.
OTPInput Extension: Customizable OTP Boxes with Auto-Hide & Scroll Support
Create secure, customizable OTP input fields with auto-hide security, horizontal scrolling, and full styling control for verification screens.
OTPInput is a free Kodular/MIT App Inventor extension to create multiple OTP input boxes with full customization. Enter any number of boxes, style them with custom colors, text size, bold/italic, corner radius, border, and even auto-hide entered digits for security. Supports horizontal scrolling for overflow, making it perfect for all screen sizes.
.png)
Support me: If you love this free extension, consider supporting development: PayPal Donations (Any amount appreciated) ❤️
Key Features
Dynamic Boxes
Add 1-10+ OTP boxes dynamically with customizable count and automatic focus navigation
Auto-Hide Security
Hides entered digits after configurable delay for enhanced security and privacy
Horizontal Scroll
Automatic horizontal scrolling for overflow boxes, perfect for smaller screens
Full Customization
Custom colors, text size, bold/italic, corner radius, border, and box dimensions
Multiple Input Types
Support for OTP (numeric with masking), Number, and Text input types in v2
Smart Events
OTPEntered event when last box is filled, plus individual box text retrieval
Designer Properties
Designer properties panel with customization options
Color and styling configuration options
How to Use
Add to Project
Import the .aix file via Kodular's Extensions tab and drag OTPInput component into your screen
Connect to Arrangement
Use ConnectToArrangement block with HorizontalArrangement to set up OTP boxes
Configure Properties
Set NumberOfBoxes, colors, text size, corner radius, and other styling options
Handle Events
Use OTPEntered event to trigger actions when all boxes are filled completely
Blocks Preview
OTPInput extension blocks for configuration and event handling
Demo Video
Watch OTPInput in action with auto-hide security, scrolling, and customization features demonstrated
Download & Installation
Version 1
Size: 21.1 KB
File: OTPinput.aix
Initial release with basic OTP functionality and customization
Version 2 (Latest)
Size: 29.7 KB
File: OTPinput.aix
Enhanced with input types, flexible sizing, and bug fixes
Version 2.0 New Features:
- Customizable Input Type: OTP (numeric with masking), Number, or Text input
- Flexible Box Sizing: MATCH_PARENT, WRAP_CONTENT, or pixel values
- Stable Keyboard: No more blinking during auto-advance
- Reset Functionality: ClearOTP to reset all boxes
- Enhanced Alignment: Perfectly centered digits
- Individual Box Retrieval: GetTextFromBox(boxNumber) function
Installation Guide
Step 1: Import
Import the .aix file via Kodular's Extensions tab in your project
Step 2: Add Component
Drag the OTPInput component into your screen from the palette
Step 3: Connect
Use ConnectToArrangement with HorizontalArrangement to initialize
Step 4: Configure
Set properties in designer or use blocks to customize appearance
Use Cases
Secure OTP Input
For login, registration, or verification screens with auto-hide security
Customizable UI
Fits light or dark themes with full styling control and modern appearance
Dynamic Layouts
Horizontal scroll for small screens or many boxes, responsive design
Developer Friendly
Fully controllable via blocks with clear, refresh, and event handling
Support This Project
This extension is completely free to use. If you find it helpful for your projects, consider supporting the development with a donation. Your support helps create more free extensions!
Any amount is appreciated and helps fuel more free extensions! ❤️