OudsPinCodeInput class

OUDS Pin Code Input design guidelines

A PIN code input is a specialized form field used to capture short, fixed-length numeric codes, typically for authentication or confirmation purposes, such as a 4, 6 or 8-digit personal identification number (PIN).

It is often presented as a series of individual input fields or boxes, each representing a single digit, to enhance readability and encourage accurate input.

This component must support smooth keyboard navigation (automatic focus shift, backspace handling), secure input masking if needed. It is commonly used in sensitive flows like login, verification, or transaction confirmation.

Parameters:

• length: Defines the fixed number of digits required for the PIN code , Example OudsPinCodeInputLength.six.value
• helperText Supporting text conveys additional information about the input field, such as how it will be used. eg. 'Enter the 4-digit code sent to your phone.'.
• errorText: Text shown below the input indicating an error state or invalid input.
• controllers: List of controllers managing the text of each digit input field.
• onEditingComplete: Callback triggered when the PIN input is completely filled. Provides the concatenated PIN value as a string.
• onChanged: Callback triggered when the pin code value changes. Provides the new value of the pin code input.
• digitInputDecoration: Defines the decoration of each digit input box OudsDigitInputDecoration

You can use OudsPinCodeInput like this :

OudsPinCodeInput(
  controllers: controllers,
  helperText: "Please enter the 4-digit code sent to your phone.",
  style: OudsTextInputStyle.defaultStyle,
  length: OudsPinCodeInputLength.four,
  digitInputDecoration: OudsDigitInputDecoration(
       hintText : "-",
       roundedCorner: true,
       style: OudsTextInputStyle.defaultStyle
       ),
   onEditingComplete: (value){},
   onChanged: (value){},
     );