svelte-pin-input

A Svelte component for entering verification/PIN codes.

Installation:

npm install svelte-pin-input

or

yarn add svelte-pin-input

Usage:

Use SveltePinInput in your component like this:

Initialize a variable to hold the inputed code and set up an event listener for the updateValue event to keep track of the user's input.

let code = '';

on:updateValue={(e) => (code = e.detail.value)}

Example

<script>
	import SveltePinInput from "svelte-pin-input";

    let code = '';

    const customStyle = `background-color: lightblue;
    text-align:center; color: black; width: 50px; height: 50px; border-radius: 10px; border: grey; margin-right: 10px`;

    const customInvalidStyle = `background-color: pink;
    text-align:center; color: black; width: 50px; height: 50px; border-radius: 10px; border: grey; margin-right: 10px`;

</script>

<SveltePinInput
    size={5}
    isInputHidden={false}
    inputType="mixed"
    inputStyle= {customStyle}
    inputStyleInvalid={customInvalidStyle}
    isValid={false}
    containerstyle="display: flex"
    on:updateValue={(e) => (code = e.detail.value)}
/>

isInputHidden={true}

inputType="number"

inputType="text"

inputType="mixed"

Props

Common props you may want to specify include:

Prop Name	Initial Value	Type	Description
size	6	number	The size of the input fields.
inputType	'text'	'text' | 'number' | 'mixed'	The type of input ('text', 'number', or 'mixed').
containerstyle	undefined	string	Optional CSS styles for the inputs container.
inputStyle	undefined	string	Optional CSS styles for the input elements.
inputStyleInvalid	undefined	string	Optional CSS styles for invalid input elements.
pattern	undefined	RegExp	Optional pattern for input validation.
isInputHidden	true	boolean	Whether the input is hidden (default: true).
disabled	false	boolean	Whether the input is disabled (default: false).
isValid	true	boolean	Whether the input is valid (default: true).

License

MIT Licensed. Copyright (c) Chiamaka Umeh 2023.