Input OTP

Accessible one-time password component with copy-paste functionality.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor

<script lang="ts">
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
 
  let value = $state("123456");
</script>
 
<InputOTP.Root maxlength={6} bind:value>
  {#snippet children({ cells })}
    <InputOTP.Group>
      {#each cells as cell (cell)}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
  {/snippet}
</InputOTP.Root>

About

Input OTP is built on top of Bits UI's PinInput which is inspired by @guilherme_rodz's Input OTP component.

Installation

pnpm dlx shadcn-svelte@latest add input-otp

npx shadcn-svelte@latest add input-otp

npx shadcn-svelte@latest add input-otp

bun x shadcn-svelte@latest add input-otp

Install bits-ui:

pnpm i bits-ui -D

npm i bits-ui -D

yarn install bits-ui -D

bun install bits-ui -D

Copy and paste the following code into your project.

import Group from "./input-otp-group.svelte";
import Separator from "./input-otp-separator.svelte";
import Slot from "./input-otp-slot.svelte";
import Root from "./input-otp.svelte";

export {
  Root,
  Group,
  Slot,
  Separator,
  Root as InputOTP,
  Group as InputOTPGroup,
  Slot as InputOTPSlot,
  Separator as InputOTPSeparator,
};

Usage

<script lang="ts">
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
</script>

<InputOTP.Root maxlength={6}>
  {#snippet children({ cells })}
    <InputOTP.Group>
      {#each cells.slice(0, 3) as cell}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
    <InputOTP.Separator />
    <InputOTP.Group>
      {#each cells.slice(3, 6) as cell}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
  {/snippet}
</InputOTP.Root>

Pattern

Use the pattern prop to define a custom pattern for the OTP input.

<script lang="ts">
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
  import { REGEXP_ONLY_DIGITS_AND_CHARS } from "bits-ui";
</script>
 
<InputOTP.Root maxlength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
  <!-- ... -->
</InputOTP.Root>

<script lang="ts">
  import { REGEXP_ONLY_DIGITS } from "bits-ui";
  import * as Field from "$lib/components/ui/field/index.js";
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
</script>
 
<Field.Field class="w-fit">
  <Field.Label for="digits-only">Digits Only</Field.Label>
  <InputOTP.Root id="digits-only" maxlength={6} pattern={REGEXP_ONLY_DIGITS}>
    {#snippet children({ cells })}
      <InputOTP.Group>
        {#each cells as cell (cell)}
          <InputOTP.Slot {cell} />
        {/each}
      </InputOTP.Group>
    {/snippet}
  </InputOTP.Root>
</Field.Field>

Separator

Use the <InputOTP.Separator /> component to add a separator between input groups.

<script lang="ts">
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
</script>
 
<InputOTP.Root maxlength={6}>
  {#snippet children({ cells })}
    <InputOTP.Group>
      {#each cells.slice(0, 2) as cell (cell)}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
    <InputOTP.Separator />
    <InputOTP.Group>
      {#each cells.slice(2, 4) as cell (cell)}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
    <InputOTP.Separator />
    <InputOTP.Group>
      {#each cells.slice(4, 6) as cell (cell)}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
  {/snippet}
</InputOTP.Root>

Disabled

Use the disabled prop to disable the input.

<script lang="ts">
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
</script>
 
<InputOTP.Root id="disabled" maxlength={6} disabled value="123456">
  {#snippet children({ cells })}
    <InputOTP.Group>
      {#each cells.slice(0, 3) as cell (cell)}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
    <InputOTP.Separator />
    <InputOTP.Group>
      {#each cells.slice(3, 6) as cell (cell)}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
  {/snippet}
</InputOTP.Root>

Controlled

Use bind:value to control the input value.

Enter your one-time password.

<script lang="ts">
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
 
  let value = $state("");
</script>
 
<div class="space-y-2">
  <InputOTP.Root maxlength={6} bind:value>
    {#snippet children({ cells })}
      <InputOTP.Group>
        {#each cells.slice(0, 6) as cell (cell)}
          <InputOTP.Slot {cell} />
        {/each}
      </InputOTP.Group>
    {/snippet}
  </InputOTP.Root>
  <div class="text-center text-sm">
    {value === "" ? "Enter your one-time password." : `You entered: ${value}`}
  </div>
</div>

Invalid

Use aria-invalid on the slots to show an error state.

<script lang="ts">
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
 
  let value = $state("000000");
</script>
 
<InputOTP.Root maxlength={6} bind:value>
  {#snippet children({ cells })}
    <InputOTP.Group>
      {#each cells.slice(0, 2) as cell (cell)}
        <InputOTP.Slot aria-invalid {cell} />
      {/each}
    </InputOTP.Group>
    <InputOTP.Separator />
    <InputOTP.Group>
      {#each cells.slice(2, 4) as cell (cell)}
        <InputOTP.Slot aria-invalid {cell} />
      {/each}
    </InputOTP.Group>
    <InputOTP.Separator />
    <InputOTP.Group>
      {#each cells.slice(4, 6) as cell (cell)}
        <InputOTP.Slot aria-invalid {cell} />
      {/each}
    </InputOTP.Group>
  {/snippet}
</InputOTP.Root>

Four Digits

A common pattern for PIN codes. This uses the pattern={REGEXP_ONLY_DIGITS} prop.

<script lang="ts">
  import { REGEXP_ONLY_DIGITS } from "bits-ui";
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
</script>
 
<InputOTP.Root maxlength={4} pattern={REGEXP_ONLY_DIGITS}>
  {#snippet children({ cells })}
    <InputOTP.Group>
      {#each cells as cell (cell)}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
  {/snippet}
</InputOTP.Root>

Alphanumeric

Use REGEXP_ONLY_DIGITS_AND_CHARS to accept both letters and numbers.

<script lang="ts">
  import { REGEXP_ONLY_DIGITS_AND_CHARS } from "bits-ui";
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
</script>
 
<InputOTP.Root maxlength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
  {#snippet children({ cells })}
    <InputOTP.Group>
      {#each cells.slice(0, 3) as cell (cell)}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
    <InputOTP.Separator />
    <InputOTP.Group>
      {#each cells.slice(3, 6) as cell (cell)}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
  {/snippet}
</InputOTP.Root>

Form

Verify your login

Enter the verification code we sent to your email address: m@example.com.

<script lang="ts">
  import RefreshCwIcon from "@lucide/svelte/icons/refresh-cw";
  import * as Card from "$lib/components/ui/card/index.js";
  import * as Field from "$lib/components/ui/field/index.js";
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Card.Root class="mx-auto max-w-md">
  <Card.Header>
    <Card.Title>Verify your login</Card.Title>
    <Card.Description>
      Enter the verification code we sent to your email address:
      <span class="font-medium">m@example.com</span>.
    </Card.Description>
  </Card.Header>
  <Card.Content>
    <Field.Field>
      <div class="flex items-center justify-between">
        <Field.Label for="otp-verification">Verification code</Field.Label>
        <Button variant="outline" size="xs">
          <RefreshCwIcon />
          Resend Code
        </Button>
      </div>
      <InputOTP.Root maxlength={6} id="otp-verification" required>
        {#snippet children({ cells })}
          <InputOTP.Group
            class="*:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl"
          >
            {#each cells.slice(0, 3) as cell (cell)}
              <InputOTP.Slot {cell} />
            {/each}
          </InputOTP.Group>
          <InputOTP.Separator class="mx-2" />
          <InputOTP.Group
            class="*:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl"
          >
            {#each cells.slice(3, 6) as cell (cell)}
              <InputOTP.Slot {cell} />
            {/each}
          </InputOTP.Group>
        {/snippet}
      </InputOTP.Root>
      <Field.Description>
        <a href="##">I no longer have access to this email address.</a>
      </Field.Description>
    </Field.Field>
  </Card.Content>
  <Card.Footer>
    <Field.Field>
      <Button type="submit" class="w-full">Verify</Button>
      <div class="text-sm text-muted-foreground">
        Having trouble signing in?
        <a
          href="##"
          class="underline underline-offset-4 transition-colors hover:text-primary"
        >
          Contact support
        </a>
      </div>
    </Field.Field>
  </Card.Footer>
</Card.Root>

Input Group Item