InputOTP

Storybook

Go to Story

InputOTPRoot()

function InputOTPRoot(__namedParameters): Element;

Defined in: src/components/InputOTP/InputOTP.tsx:31

Root component for the OTP input.

Provides the main container and context for the OTP input fields. Controls behavior like focusing, keyboard navigation, and value management.

Parameters

Parameter	Type
__namedParameters	OTPInputProps & RefAttributes<HTMLInputElement>

Returns

Element

Example

<InputOTPRoot maxLength={2}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
  </InputOTPGroup>
</InputOTPRoot>

---

InputOTPGroup()

function InputOTPGroup(__namedParameters): Element;

Defined in: src/components/InputOTP/InputOTP.tsx:69

Group component for OTP input slots.

Used to organize OTP input slots into logical groups. Useful for formatting OTP codes with visual separators between groups.

Parameters

Parameter	Type
__namedParameters	DetailedHTMLProps<HTMLAttributes<HTMLDivElement>>

Returns

Element

Example

<InputOTPRoot maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTPRoot>

---

InputOTPSlot()

function InputOTPSlot(__namedParameters): Element;

Defined in: src/components/InputOTP/InputOTP.tsx:90

Individual input slot for a single character in the OTP input.

Displays the entered character and visual feedback when active. Shows a blinking caret when the slot is focused but empty. Automatically applies border radius to the first and last slots in a group.

Parameters

Parameter	Type
__namedParameters	InputOTPSlotProps

Returns

Element

Example

<InputOTPSlot index={0} />

---

InputOTPSeparator()

function InputOTPSeparator(__namedParameters): Element;

Defined in: src/components/InputOTP/InputOTP.tsx:136

Visual separator component for OTP input groups.

Used to visually separate groups of OTP input slots. Includes proper accessibility attributes for screen readers.

Parameters

Parameter	Type
__namedParameters	DetailedHTMLProps<HTMLAttributes<HTMLDivElement>>

Returns

Element

Example

<InputOTPRoot>
  <InputOTPGroup>
    ...
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    ...
  </InputOTPGroup>
</InputOTPRoot>

---

InputOTP()

function InputOTP(__namedParameters): Element;

Defined in: src/components/InputOTP/InputOTP.tsx:175

A component for handling one-time password (OTP) input. Built on top of input-otp.

Parameters

Parameter	Type
__namedParameters	InputOTPProps

Returns

Element

Examples

// Basic usage
<InputOTP
  maxLength={6}
  onComplete={(code) => verifyCode(code)}
/>

// With separator
<InputOTPRoot maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTPRoot>