120k
New

Input OTP

PreviousNext

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

About

Input OTP is built on top of vue-input-otp which is inspired by @guilherme_rodz's Input OTP component.

Installation

pnpm dlx shadcn@latest add @force-ui-vue/input-otp

Usage

<script setup lang="ts">
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"
</script>
 
<template>
  <InputOTP v-model="value" :maxlength="6">
    <InputOTPGroup>
      <InputOTPSlot :index="0" />
      <InputOTPSlot :index="1" />
      <InputOTPSlot :index="2" />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot :index="3" />
      <InputOTPSlot :index="4" />
      <InputOTPSlot :index="5" />
    </InputOTPGroup>
  </InputOTP>
</template>

Composition

Use the following composition to build an InputOTP:

InputOTP
├── InputOTPGroup
│   ├── InputOTPSlot
│   ├── InputOTPSlot
│   └── InputOTPSlot
├── InputOTPSeparator
├── InputOTPGroup
│   ├── InputOTPSlot
│   ├── InputOTPSlot
│   └── InputOTPSlot
├── InputOTPSeparator
└── InputOTPGroup
    ├── InputOTPSlot
    └── InputOTPSlot

Pattern

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

<script setup lang="ts">
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "vue-input-otp"
 
// ...
</script>
 
<template>
  <InputOTP :maxlength="6" :pattern="REGEXP_ONLY_DIGITS_AND_CHARS">
    ...
  </InputOTP>
</template>

Examples

Separator

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

Disabled

Use the disabled prop to disable the input.

Controlled

Use the v-model directive 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 vue-input-otp documentation for more information.