OTP Input

One-time password input with 6 individual digit fields. Auto-advances on input, supports paste, keyboard navigation, and error states.

Source

Import

ts 
import OtpInput from '$lib/components/OtpInput.svelte';

Usage

svelte 
<script lang="ts">
  let otp = $state('');
</script>

<OtpInput bind:value={otp} />

Verification Flow

The correct code is 123456. Try an incorrect code to see the error state.

Enter verification code

Sent to +1 (555) *** **42

svelte 
<script lang="ts">
  let otp = $state('');
  let error = $state('');

  function verify() {
    if (otp !== '123456') {
      error = 'Incorrect code.';
      return;
    }
    error = '';
    // success!
  }
</script>

<OtpInput bind:value={otp} {error} onComplete={() => error = ''} />
<Button onclick={verify}>Verify</Button>

Error State

Incorrect code. Please try again.

API Reference

PropTypeDefaultDescription
value string''Bindable 6-digit OTP value.
error string—Error message shown below the input. Adds red ring.
onComplete () => void—Called when all 6 digits are filled.
disabled booleanfalseDisables all digit inputs.
class string—Extra CSS classes on the wrapper.