Svelte Input OTP

OTP Input for Svelte 5

Note: This is heavily based on svelte-otp which is written in Svelte 4. This library adds some improvements.

Features

• Fully customizable
• Supports iOS one-time-code auto fill
• Paste Support
• Uses the appropriate keyboard in mobile
• Keyboard navigation

Usage

npm install svelte-input-otp

Simplest form

Getting started is as easy as importing the SvelteOtp component and just using it.

<script>
    import { OTPInput } from 'svelte-input-otp';
</script>

<OTPInput />

Controlling the state

You can easily control the state of the value by binding it to the value prop.

You can also change the number of inputs through the numOfInputs prop.

<script>
    import { OTPInput } from 'svelte-input-otp';

    let value = $state('abc12');
</script>

<OTPInput numOfInputs={5} bind:value />