Input OTP

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/input-otp.json

Usage

import {
  InputOtp,
  InputOtpSeparator,
  InputOtpSlot,
} from "@/components/ui/input-otp";

<InputOtp>
  <InputOtpSlot index={0} />
  <InputOtpSlot index={1} />
  <InputOtpSlot index={2} />
  <InputOtpSeparator />
  <InputOtpSlot index={3} />
  <InputOtpSlot index={4} />
  <InputOtpSlot index={5} />
</InputOtp>

Controlled

Use value and onValueChange to control the input.

State

Disabled

Use the disabled prop to disable the input.

Invalid

Use the invalid prop to mark the input as invalid and show error styling.

Examples

Four Digits

Use four <InputOtpSlot /> elements for a 4-digit OTP.

Separator

Add <InputOtpSeparator /> between groups of slots.

With Placeholder

Use the placeholder prop to show a placeholder in each slot.

Blur on Complete

Use the blurOnComplete prop to blur the input when all slots are filled.

Mask

Use the mask prop to mask the input value.

Custom Size

Pass className to <InputOtp /> to override slot dimensions and text size.

API Reference

InputOtp

InputOtpSlot

Single OTP slot. Use index to specify position (0-based).

InputOtpSeparator

Visual separator between slots. Extends native <hr> props.

For a complete list of props, see the Ark UI documentation.