0.2.2 • Published 2 years ago
@soywod/pin-field v0.2.2
📟 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
