Input OTP

Default

Six-digit OTP.

Usage

Import the parts you need from the component's folder.

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from "@/components/ui/input-otp";

With separator

Split slots into groups for readability.

Controlled

Bind v-model and read the value back as it's typed.

Digits only

Restrict input to digits with the pattern prop (REGEXP_ONLY_DIGITS).

Alphanumeric

Allow letters and digits via REGEXP_ONLY_DIGITS_AND_CHARS.

Four digits

A shorter code by lowering maxlength to 4.

Disabled

Prevent interaction with the disabled prop.

Invalid

Flag an error state with aria-invalid on the slots.

Form

Pair with a Label and submit Button inside a form.

API Reference