New Plugin - PIN Input

Hey everyone! :wave:t2:

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 :tada:. 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 :sweat_smile:), 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.

2 Likes