OTP Input

A fully accessible input component for one-time passwords and verification codes.

Installation

npx vayu-ui init #one time only

npx vayu-ui add otp-input

npx vayu-ui add -t otp-input #with test case needs

Usage

OTP Input Example

Default (6-digit)

Value: —

Grouped with Separator

With Error State

Invalid code. Please try again.

Disabled

<OTPInput maxLength={6}>
  <OTPInput.Group>
    <OTPInput.Slot index={0} />
    <OTPInput.Slot index={1} />
    <OTPInput.Slot index={2} />
  </OTPInput.Group>
  <OTPInput.Separator />
  <OTPInput.Group>
    <OTPInput.Slot index={3} />
    <OTPInput.Slot index={4} />
    <OTPInput.Slot index={5} />
  </OTPInput.Group>
</OTPInput>

Anatomy

<OTPInput>
  <OTPInput.Group>
    <OTPInput.Slot />
  </OTPInput.Group>
  <OTPInput.Separator />
</OTPInput>

Accessibility

Keyboard support: Full native keyboard interaction via a hidden input element.
ARIA attributes: Uses role="group" and aria-label for grouping, with aria-invalid for error states.
Focus behavior: Automatically manages focus state across visual slots when the hidden input is focused.

The component is announced as a single input group with a descriptive label. When focused, screen readers announce it as an editable text field or a group. Character entries are announced as they are typed.

Component Folder Structure

OTPInput/
├── OTPInput.tsx
├── OTPInputGroup.tsx
├── OTPInputSlot.tsx
├── OTPSeparator.tsx
├── index.ts
└── types.ts

Props

OTPInput

Prop	Type	Description
`value`	`string`	Controlled value of the input.
`onChange`	`(value: string) => void`	Callback triggered when value changes.
`maxLength`	`number`	Maximum number of characters.
`onComplete`	`(code: string) => void`	Callback triggered when code is fully entered.
`label`	`string`	Accessible label for the input group.
`hasError`	`boolean`	Whether the input is in an error state.
`errorMessageId`	`string`	ID of the element containing the error message.
`autoFocus`	`boolean`	Whether to focus the input on mount.
`disabled`	`boolean`	Whether the input is disabled.

OTPInput.Group

Prop	Type	Description
`children`	`ReactNode`	Content of the group, typically Slots.
`className`	`string`	Custom styles for the group container.

OTPInput.Slot

Prop	Type	Description
`index`	`number`	The index of the character this slot represents.
`className`	`string`	Custom styles for the slot.

OTPInput.Separator

Prop	Type	Description
`children`	`ReactNode`	Custom separator content (defaults to a dot).
`className`	`string`	Custom styles for the separator.

OTP Input

OTP Input Example

On this page