Svelte Pin Input

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:

License

MIT Licensed. Copyright (c) Chiamaka Umeh 2023.