Digit Pin Input
Introduction
A modern, responsive PIN input component designed specifically for native mobile. This plugin provides a sleek, customizable PIN entry interface with native mobile interactions and smooth animations.
Features
Customizable PIN length (1-10 digits) with responsive input boxes.
Dark/Light theme support with customizable accent colors.
Native mobile dial pad with haptic feedback and touch-optimized buttons.
Real-time PIN state publishing, event triggers for submit, action text clicks, and PIN changes.
Platform-responsive design that adapts to mobile environments.
Large touch targets and accessibility-friendly interface.
Paste functionality for quick PIN entry from clipboard.
Optional native keyboard mode for direct text input.
Smooth animations and visual feedback for enhanced UX.
Built-in "Forgot PIN" action with customizable text and events.
Flexible layout with auto-scaling for different screen sizes.
Customizable button styling, border radius, and container appearance.
How to use
- Drop Digit Input element on the view.
- Customize according to your needs.
- Listen for action events to trigger needed events.
Element Fields
- Accent Color: The accent color for the input
- Color Mode: The color mode (Light or Dark)
- Inputs Count: The number of PIN inputs (1-10)
- Header Text: The header text displayed
- Button Text: The text for the submit button
- Button Roundness: The roundness of the buttons
- Container Roundness: The roundness of the container
- Action Text: The text for the action link
- Dial Pad: Enable or disable the dial pad
Exposed States
- PIN (Text): The entered PIN value
Events
- Submit button is clicked: This event fires when the submit button is clicked
- Action text is clicked: This event fires when the action text is clicked