Svelte Otp

A Otp Component that can be used with Svelte.

Install

npm install svelte-otp --save

yarn add svelte-otp

• Demo
• Usage
• Props
• Events

Demo

To view a demo online: https://svelte-otp.netlify.app/

To view demo examples locally clone the repo and run npm install && npm run dev

import OtpInput from 'svelte-otp';

// main
<OtpInput
    separator="-"
    placeholder="0000"
    ...
/>

Usage

<OtpInput
        separator="-"
        placeholder="0000"
        ...
    />

numberOfInputs prop

    <OtpInput numberOfInputs={6} />

numberOfInputs along with separatorprop

<OtpInput numberOfInputs={4} separator="-"  />

Using numberOfInputs, separator and placeholder props

<OtpInput separator="-" placeholder="******" numberOfInputs={6}  />

Masking Input

<OtpInput separator="-" placeholder="****" numberOfInputs={4} maskInput={true} />

Change Focus on Input/Delete

<OtpInput
    ...
    autoFocusNextOnInput={true}
    focusPreviousOnDelete={true}
/>

Programtic Access of value of Otp

    let otpInstance: {getValue: () => void};
    function handleClick() {
        console.log('value on click',
            otpInstance?.getValue());
    }
    ...
<OtpInput
        ...
        bind:this={otpInstance}
    />

Prefill value on some other events/actions

function callbackFunction(event: CustomEvent) {
    console.log('emittedValue', event.detail);
}
function handlePrefill() {
    value = '123456';
}
<OtpInput
        ...
        bind:initialValue={value}
        on:notify={callbackFunction}
        ...
        emitEventOnPrefill={false}
    />
<div class="button-otp" on:click={handleClick}> Get Value </div>

Event on Otp Filled completely

function callbackFunction(event: CustomEvent) {
    console.log('emittedValue', event.detail);
}

<OtpInput
        ...
        on:notify={callbackFunction}
        ...
        emitEventOnPrefill={false}
    />

Available props

Prop	Type	Default	Description
numberOfInputs	Number	4	Number of Inputs to be shown
separator	String		separator between inputs
placeholder	String		placeholder for text inputs.
maskInput	Boolean	false	mask input values
autoFocusNextOnInput	Boolean	true	focus on next input after entering value
focusPreviousOnDelete	Boolean	true	move focus to previous element on delete
customWrapperClass	string	false	used to style wrapper element of otp
customSeparatorClass	string		used to style separator
customRowClass	string		used to style individual input
customInputWrapperClass	string		used to style input wrapper
customTextInputClass	string		used to style input box
emitEventOnPrefill	string		emits events on filling all input fields

Events

Only emitted event.

eventObj = { completevalue: string; isInputComplete: boolean; }

Event	Output	Description
notify	eventObj	Even is emitted when input is complete

Authors

@shubhadip