svelte-pincode

[![NPM][npm]][npm-url]

> Declarative pin code component for Svelte.

A pin code is a short sequence of characters (usually numeric) used for verification. It differs from a password in that it is typically ephemeral and is not predetermined by the user.

Try it in the Svelte REPL.

---

Installation

``sh


npm

Bind to either the code or value prop.

- code (string[]): Array of input values. An empty string represents an undefined value.
- value (string): code joined as a string.


`svelte


Set selectTextOnFocus to true for the input value text to be selected when focused.


`svelte


input.focus()}>
Focus input

`


$3

By default, this component accepts alphanumeric values.

Set type to "numeric" to only allow numbers.


`svelte






`


$3

Define intitial input values by using the code prop or value prop on PincodeInput.


`svelte


This example illustrates how you can validate the code once all inputs have a value by binding to the complete prop.


`svelte


Use the dispatched "complete" event as an alternative to binding the complete prop.

`svelte no-eval
on:complete="{(e) => {
console.log(e.detail); // { code: string[]; value: string; }
}}"
/>
`

$3

code can be set programmatically.

In the following example, type some initial values and try setting or clearing the code.


`svelte


passcode = ['1', '2', '3', '4']}>
Set code


passcode = ['', '', '', '']}>
Clear code

`


$3

To programmatically focus the first input, invoke the focusFirstInput method in a component reference.


`svelte



Focus first input

`


$3

To focus the next input with no value, invoke the focusNextEmptyInput method.


`svelte



Focus next empty input

`


$3

To focus the last input, invoke the focusLastInput method.


`svelte



Focus last input

`


Styling

$3

This component is minimally styled; override the default styles by targeting the data-pincode selector:

`css
/ Pincode /
:global([data-pincode]) {
display: inline-flex;
border: 1px solid #e0e0e0;
}

/* PincodeInput /
:global([data-pincode] input) {
width: 3rem;
padding: 0.5rem 1rem;
margin: 0;
border: 0;
border-radius: 0;
text-align: center;
}

:global([data-pincode] input:focus) {
z-index: 1;
}

:global([data-pincode] input:not(:last-of-type)) {
border-right: 1px solid #e0e0e0;
}
`

$3

Use the unstyled components located in the svelte-pincode/unstyled folder if you prefer to style the components from scratch.

`html

`

API

$3

#### Props

| Name | Type | Default value |
| :---------------- | :------------------------------ | :--------------- |
| code | string[] | [] |
| value | string | "" |
| type | "alphanumeric" or "numeric" | "alphanumeric" |
| selectTextOnFocus | boolean | false |

#### Accessors

- focusFirstInput
- focusNextEmptyInput
- focusLastInput

#### Dispatched Events

- on:complete: fired when all inputs have a value
- on:clear: fired when no inputs have a value

`svelte no-eval
on:complete="{(e) => {
console.log(e.detail); // { code: string[]; value: string; }
}}"
on:clear
/>
`

$3

#### Props

| Name | Type | Default value |
| :--- | :----------------- | :------------------------------------- |
| id | string | "input" + Math.random().toString(36) |
| ref | HTMLInputElement | null` |

#### Forwarded Events

- on:focus
- on:blur
- on:keydown

Changelog

CHANGELOG.md

License

MIT

[npm]: https://img.shields.io/npm/v/svelte-pincode.svg?style=for-the-badge&color=%23ff3e00
[npm-url]: https://npmjs.com/package/svelte-pincode