120k
New

Input OTP

PreviousNext

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

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@latest add @force-ui-svelte/input-otp

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 (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>

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>

Examples

Separator

Use the InputOTP.Separator component to add a separator between the groups of cells.

Disabled

Use the disabled prop to disable the input.

Controlled

Use bind:value to control the input value.

Invalid

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

Four Digits

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

Alphanumeric

Use REGEXP_ONLY_DIGITS_AND_CHARS to accept both letters and numbers.

Form

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Bits UI PinInput documentation for more information.