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

Events

Only emitted event.

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

Authors

@shubhadip