verification-code-input
Reactive icon

Verification Code Input

Stable version 1.1.0 (Compatible with OutSystems 11)
Uploaded
 on 11 June 2024
 by 
5.0
 (1 rating)
verification-code-input

Verification Code Input

Details
This component provides an input field to enter a verification (or confirmation) code in a set of separate, connected input fields. Supports codes made up of digits, letters or both (of any length). An event is triggered when the code is changed.
Read more

This component provides an input field to enter a verification (or confirmation) code in a set of separate, connected input fields.  

Supports codes in digits only, letters only, or a combination of digits and letters (of any length).

An event is triggered when the code is filled in completely.

The component has five input parameters:

  • Length
    • This is the length of the expected code. This determines the amount of input fields.
  • IsAutoFocus
    • True if the first verification code input field should automatically get focus. False if not. Defaults to True.
  • ExtendedClass
    • Put extra css classes in here.
  • IsAllowDigits
    • True if entering digits should be allowed.
  • IsAllowLetters
    • True if entering letters should be allowed.


The VerificationCodeInput component supports the following:

  • Pasting a complete code
  • Navigating between fields using the left and right arrow keys
  • Using Backspace to clear the code field by field
  • Using Delete to clear the code field by field
  • Selecting the input text when clicking an input, so that the code is replaced when typing a new number
  • Triggers an event when the code is changed. The event also has an input parameter IsComplete to show if the code is complete or not.


Release notes (1.1.0)
  • Include support for letters, digits, or both
License (1.1.0)
Reviews (0)
Team
Other assets in this category