PIN pad

Example

pin around one field - type="password", inputmode="numeric", autocomplete="off" and the length in maxlength. The library draws the dots and the keypad: 1 to 9, 0 and delete. The PIN goes when its last digit lands: the pad asks the page in redz:pin with detail.value, and is busy while the page's promise runs. false clears the dots and marks them wrong - the page's alert says why; true leaves the pad as it is while the page goes on. Try 2580.

<form class="vstack gap-16 align-items-center" method="post">
	<label class="form-label" for="pin-unlock-field">Enter your PIN</label>
	<div class="alert" id="pin-unlock-alert" role="alert"></div>
	<div class="pin">
		<input id="pin-unlock-field" name="pin" type="password" inputmode="numeric" maxlength="4" autocomplete="off" aria-describedby="pin-unlock-alert">
	</div>
</form>

pad.addEventListener('redz:pin', (event) => {
  event.preventDefault();
  event.detail.respondWith(post({action: 'pin_unlock', pin: event.detail.value}).then((answer) => {
    if (answer.ok) {
      location.assign(answer.redirect);
    }
    return answer.ok;
  }));
});

Any length

A minlength below the maxlength takes any length between them: the dots grow as it is typed, and the keypad gets an Enter key beside its 0. With no page listening the pad submits its form - on Enter, or at the last digit of a fixed length.

<form class="vstack gap-16 align-items-center" method="post" action="#pin-any">
	<label class="form-label" for="pin-any-field">The site's enrolment PIN</label>
	<div class="pin">
		<input id="pin-any-field" name="pin" type="password" inputmode="numeric" minlength="4" maxlength="8" autocomplete="off">
	</div>
</form>

Keyboard and accessibility

• The field is the control: it has the label, takes the digits from any keyboard and is read as a secure field with its length. The dots are drawn for the eyes only.
• The keypad is for touch: its keys stay out of the Tab order and never take the focus from the field. The delete and Enter keys are named by the page's texts pin.delete and pin.enter.
• Enter in the field sends a PIN of a length the field takes.
• Wrong, the dots turn red and shake once; with reduced motion they only turn red. The words of the page's alert are what says it.

Tokens

From css/components/pin.css, which declares no custom property of its own.

It reads the theme's --redz-space-24, --redz-radius-8, --redz-focus, --redz-space-12, --redz-border-strong, --redz-primary, --redz-danger, --redz-space-8, --redz-fs-24.