PinPad

A component used to authenticate or identify individuals through a standarized number pad.

const onPinSubmit = (pin: number[]): Promise<PinValidationResult> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const isPinValid =
        pin.length === 6 && pin.every((digit, index) => digit === index + 1);
      const result: PinValidationResult = isPinValid ? 'accept' : 'reject';
      resolve(result);
    }, 1000);
  });
};

PinPad

PinPadProps

masked

Whether the entered PIN should be masked.

minPinLength

The minimum length of the PIN.

maxPinLength

The maximum length of the PIN.

label

The content for the prompt on the pin pad.

pinPadAction

The call to action between the entry view and the keypad, consisting of a label and function that returns the pin.

onSubmit

The function to be called when the PIN is submitted.

onPinEntry

The function to be called when a PIN is entered.

PinLength

4 | 5 | 6 | 7 | 8 | 9 | 10

PinPadActionType

label

The label for the action button.

onPress

The function to be called when the action button is pressed.

PinValidationResult

'accept' | 'reject'