Input OTP

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/input-otp

Anatomy#

InputOTP
├── InputOTPSlot
└── InputOTPSeparator

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.

States#

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 *:data-[slot=input-otp-input]:size-* and *:data-[slot=input-otp-input]:text-* to InputOTP to override slot dimensions and text size.

API Reference#

InputOTP#

InputOTPSlot#

Single OTP slot. Use index to specify position, 0 is the first slot.

InputOTPSeparator#

Visual separator between slots.

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