Skip to main content

PinPad
component

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

Anchor to pinpadPinPad

Anchor to onSubmit
onSubmit
(pin: number[]) => Promise<>
required

The function to be called when the PIN is submitted.

Anchor to label
label
string

The content for the prompt on the pin pad.

Anchor to masked
masked
boolean

Whether the entered PIN should be masked.

Anchor to maxPinLength
maxPinLength

The maximum length of the PIN.

Anchor to minPinLength
minPinLength

The minimum length of the PIN.

Anchor to onPinEntry
onPinEntry
(pin: number[]) => void

The function to be called when a PIN is entered.

Anchor to pinPadAction
pinPadAction

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

Was this section helpful?

Validation

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);
});
};

Preview

Anchor to exampleValidating a PIN Example

This code defines a function onPinSubmit that simulates the validation of a Personal Identification Number (PIN). The function takes an array of numbers as input, representing the PIN entered by a user.

The function returns a Promise that resolves with a PinValidationResult, which can be either 'accept' or 'reject'. The Promise simulates an asynchronous operation using setTimeout with a delay of 1 second.

This code simulates an asynchronous operation using the setTimeout callback. The code checks if the entered PIN matches the sequence [1, 2, 3, 4, 5, 6]. If the entered PIN matches this sequence, the Promise resolves with 'accept'; otherwise, it resolves with 'reject'.

This function can be used to simulate PIN validation in a system where the correct PIN is [1, 2, 3, 4, 5, 6].

Was this section helpful?

Anchor to guidelinesGuidelines

  • Due to the nature of this component and the intended UX for this type of action, we recommend surfacing this in a full screen modal.

  • Please be advised that when utilizing the onSubmit callback, it is your responsibility to manage the navigation to the subsequent screen or dismissal of the modal. The component will only handle rejection of invalid PIN cases.

Was this section helpful?

Anchor to content-guidelinesContent guidelines

When referring to a personal identification number, refer to it as a PIN, with all capital letters.

Also when writing the PIN title or PinPadAction label:

  • Be concise
  • Never go over 4 words
  • Do not use punctuation
  • Start with a capital letter

Title (Enter PIN)

✅ [PIN pad title] Enter PIN
✅ [PIN pad title] Enter staff PIN
✅ [PIN pad title] Create PIN
❌ [PIN pad title] Please put in a PIN
❌ [PIN pad title] Create a PIN

PinPadAction (Generate random PIN, Clear)

For PIN Pad actions, the action label should clearly communicate the action.

✅ [PIN pad action label] Generate random PIN
❌ [PIN pad action label] Please create a new random PIN

You can use just [verb], if it's obvious from the surrounding context what the [item] is:

✅ [PIN pad action label] Clear
❌ [PIN pad action label] Clear PIN

Was this section helpful?