Sections

Components

Utilities

Forms

Hooks

useIsMobile

Input OTP

Copy Markdown

Accessible one-time password input.

Docs API

PreviewCode

Installation#

CLIManual

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.

PreviewCode

Enter the code 1234

❌

States#

Disabled#

Use the disabled prop to disable the input.

PreviewCode

Invalid#

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

PreviewCode

Examples#

Four Digits#

Use four InputOTPSlot elements for a 4-digit OTP.

PreviewCode

Separator#

Add InputOTPSeparator between groups of slots.

PreviewCode

With Placeholder#

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

PreviewCode

Blur on Complete#

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

PreviewCode

Mask#

Use the mask prop to mask the input value.

PreviewCode

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.

PreviewCode

API Reference#

InputOTP#

Prop	Type	Default
`withFakeCaret`	`boolean`	`false`
`value`	`string`	-
`defaultValue`	`string`	-
`onValueChange`	`({ value, valueAsString }) => void`	-
`disabled`	`boolean`	-
`invalid`	`boolean`	-
`otp`	`boolean`	`true`
`blurOnComplete`	`boolean`	-
`mask`	`boolean`	-

InputOTPSlot#

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

Prop	Type	Default
`index`	`number`	required

InputOTPSeparator#

Visual separator between slots.

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

[

Input Group ](/docs/components/input-group)[

Input ](/docs/components/input)

On This Page

Installation Anatomy Usage Controlled States Disabled Invalid Examples Four Digits Separator With Placeholder Blur on Complete Mask Custom Size API Reference InputOTP InputOTPSlot InputOTPSeparator