OudsPinCodeInput class

OUDS PIN Code Input Design Guidelines

Reference design version : 1.3.0

A fixed-length PIN code input composed of individual digit cells, typically used for authentication or confirmation flows.

Architecture

A single invisible TextField captures all keyboard input and holds the full PIN string, keeping the soft keyboard open and stable across all cell transitions. The visual cells (OudsDigitInput) are purely decorative.

Accessibility

When any platform accessibility feature is active (screen reader, bold text, high contrast, reduced motion, …) the component switches to an accessibility-friendly mode:

• No automatic focus advance — the user moves to the next cell manually.
• Cell-by-cell deletion — backspace clears only the selected cell.
• Live regions disabled — prevents the screen reader from jumping to cells whose content changed after a keystroke.

Example

OudsPinCodeInput(
  length: OudsPinCodeInputLength.six,
  helperText: 'Enter your 6-digit code',
  digitInputDecoration: OudsDigitInputDecoration(
    hintText: '-',
    hiddenPassword: true,
  ),
  onChanged: (value) => print('Current PIN: $value'),
  onEditingComplete: (value) => print('PIN complete: $value'),
)

Parameters:

• length: Number of digit cells. Defaults to OudsPinCodeInputLength.six.
• helperText: Supporting text shown below the input.
• errorText: Error message shown below the input; also sets the error state.
• controllers: Optional per-cell controllers for reading individual values.
• onEditingComplete: Called with the full PIN when all cells are filled.
• onChanged: Called with the current PIN on every keystroke.
• digitInputDecoration: Visual and keyboard configuration for the cells.