⚠️ Project archived due to multiple issues related to Web Components. See its React implementation.

📟 PIN Field

Native web component for entering PIN codes.

Installation

npm install @soywod/pin-field
# or
yarn add @soywod/pin-field

The package is available in both GitHub Packages and npm registries.

<script type="module" src="https://cdn.jsdelivr.net/npm/@soywod/pin-field/dist/pin-field.esm.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}}`