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

📟 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-field

The 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