Input OTP

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @shark-ui/input-otp

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>

Examples

Four Digits

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

Separator

Add <InputOtpSeparator /> between groups of slots.

Disabled

Use the disabled prop to disable the input.

Controlled

Use value and onValueChange to control the input.

Invalid

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

With Placeholder

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

Custom Size

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

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.

API Reference

InputOtp

InputOtpSlot

Renders a single OTP input field. Use index to specify the slot position (0-based).

InputOtpSeparator

Renders a visual separator between slots. Extends native <hr> props.

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