# PIN pad
A short number that unlocks a trusted device: dots that fill as it is typed and a keypad for a finger, while the keyboard types as it always does.
## 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.
```html
```
```js
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.
```html
```
## 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`](https://github.com/redz-tech/REDZ.UI/blob/main/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`.