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