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.