Pin Input

A multi-box PIN entry component where each character gets its own input box. Users type their code and focus automatically advances to the next box. Supports validation, shake animation on wrong input, and password masking. Perfect for verification codes, two-factor authentication, and secure PIN entry.

Getting Started

Add the Pin Input to your screen. You will see a row of 4 input boxes by default. Users tap the first box and start typing -- focus moves automatically to the next box after each character. Set up the Correct Answer field and wire the On Correct and On Incorrect actions to handle the verification result.

Settings

Pin Input My

• Confirmation Type -- Choose Confirm Correct Text to validate the entered PIN against a correct answer, or Don't Confirm to accept any input without validation.

• Enter Correct Answer -- The expected PIN that users must enter. Use Magic Text to pull this from your database (e.g., a verification code sent to the user). Only used when Confirmation Type is set to validate.

• Enable Shake Animation on Wrong Answer -- Toggle on to shake the input boxes when the user enters an incorrect PIN. A clear visual signal that something is wrong.

• What Should Happen On Complete? -- Choose the behavior after all boxes are filled: Clear Input if Correct (keeps wrong answers visible), Clear Input Always, Clear If Wrong (keeps correct answers visible), or Don't Clear.

• Keyboard Type -- Choose Text for alphanumeric codes or Number for numeric-only PINs. This determines which keyboard appears on mobile devices.

• Action on CORRECT input completion -- Fires when the entered value matches the correct answer. Use this to navigate to the next screen, unlock a feature, etc.

• Action on INCORRECT input completion -- Fires when the entered value does not match. Use this to show an error message or limit retry attempts.

• Additional Action on input completion -- Fires every time all boxes are filled, regardless of whether the answer is correct or not. Useful for logging attempts.

Input Stylings

• Enable Password Mode -- Toggle on to mask entered characters with dots, hiding the PIN as it is typed.

• Input Font Stylings -- A formatting reference field for the text styling. Use the controls below it to format.

• No. of Inputs -- How many input boxes to show, from 1 to 10. Default is 4 for standard PIN codes, but set to 6 for longer verification codes.

• Auto Focus -- Toggle on to automatically focus the first input box when the screen loads, so users can start typing immediately.

• Input Height / Input Width -- Set the dimensions of each input box, from 20 to 100 pixels each.

• Background Color -- Background of each input box.

• Border Color / Border Width / Border Radius -- Style the default (unfocused) border of each box.

• Focused Background Color -- Background when a box is active/focused.

• Focused Border Width / Focused Border Color -- Highlight the active box with a thicker, colored border. Uses your primary color by default.

• Focused Font Size -- Text size inside the focused box (10-40).

• Focused Text Color -- Text color in the active box. Uses your primary color by default.

Actions

• Action on CORRECT input completion -- Fires when the PIN matches. Navigate to the authenticated screen or trigger the next step.

• Action on INCORRECT input completion -- Fires on a mismatch. Show a toast, increment a retry counter, or lock the user out.

• Additional Action on input completion -- Fires on any completion. Log the attempt, update analytics, etc.

Tips & Best Practices

• Set No. of Inputs to match your code length -- 4 for PINs, 6 for verification codes, 8 for longer security tokens.

• Always enable Auto Focus so users do not have to tap the first box manually.

• Use Enable Password Mode for security-sensitive codes where you do not want the PIN visible on screen.

• Set Clear If Wrong as the completion behavior so users can immediately retype without having to manually clear the boxes.

• Use Magic Text for the Correct Answer field so the expected code comes from your database (e.g., a randomly generated OTP sent via email or SMS).

Example Use Cases

• Two-Factor Authentication: Users enter a 6-digit code sent to their email or phone to verify their identity.

• App Lock Screen: A 4-digit PIN protects access to the app or a sensitive section.

• Order Verification: Delivery drivers enter a pickup code to confirm they have the right order.