Native web component for entering PIN codes.
Live demo at https://soywod.github.io/pin-field/demo/.
npm install @soywod/pin-field
# or
yarn add @soywod/pin-fieldThe package is available in both GitHub Packages and npm registries.
<script type="module" src="https://cdn.jsdelivr.net/npm/@soywod/pin-field/lib/pin-field.min.js"></script><swd-pin-field></swd-pin-field>| 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).
| 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 |
| 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}} |