Hey everyone!
Building a custom PIN input natively in Bubble can be a challenge, so that’s why I’m super excited to announce that I just released the PIN Input plugin . Give it a try, It’s completely free!
Plugin (Ignore the $24 pricing, it’s bubble’s bug): PIN Input Plugin | Bubble
Demo page: https://plugin-by-hanif.bubbleapps.io/version-test/pin-input
Editor: plugin by hanif | Bubble Editor
Why use this plugin?
1. Highly Customizable
With an intuitive style system, you can customize nearly every aspect of the input:
- Total number of input boxes
- Border width and color
- Font styles
- And more!
The input is also resizable and responsive, making it adaptable to any design.
2. Auto Focus
Just like other modern PIN inputs, this plugin automatically moves focus to the next box when an input is filled. It also moves back to the previous box when you press backspace, ensuring a smooth and natural user experience.
3. Paste Support
Users can paste their PIN in one go—no need to type each digit individually.
4. Number-Only Input
The plugin currently supports numeric inputs only, which triggers the numeric keyboard on mobile devices. Let me know if you’d like me to add support for alphabetical input in the future!
5. Free and Open Source
This plugin is free forever and open-source! The codebase is well-documented (or at least I tried ), so it should be easy for anyone to extend and customize.
6. Lightweight
The plugin doesn’t rely on any external libraries. It simply adds a few lines of CSS to your app’s header for styling purposes.