# 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/pin-input.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.