📟 PIN Field 
Native web component for entering PIN codes.
Live demo at https://soywod.github.io/pin-field/demo/.
Installation
From npm
npm install @soywod/pin-field
# or
yarn add @soywod/pin-fieldThe package is available in both GitHub Packages and npm registries.
From CDN (jsDelivr)
<script type="module" src="https://cdn.jsdelivr.net/npm/@soywod/pin-field/dist/pin-field.esm.js"></script>Usage
<swd-pin-field></swd-pin-field>Attributes
| Name | Description |
|---|---|
length |
Number of inputs the PIN Field is composed of |
validate |
List of allowed chars |
Additional attributes are transfered to all the inputs (except for id).
Properties
| Name | Type | Description | Default |
|---|---|---|---|
length |
number |
Number of inputs the PIN Field is composed of | 5 |
validate |
string|string[]|RegExp|(key: string) => boolean |
Validator | /^[a-zA-Z0-9]$/ |
format |
(key: string) => string |
Formatter | key => key |
Events
| Name | Description | Data |
|---|---|---|
change |
Triggered when the PIN code changes | {detail: {value: string}} |
complete |
Triggered when the PIN code is complete | {detail: {value: string}} |
resolve |
Triggered when a key is resolved | {detail: {key: string}} |
reject |
Triggered when a key is rejected | {detail: {key: string}} |
Sponsoring
