Input Otp

A specialized input component for entering one-time passwords and verification codes.

Input OTP provides an accessible and user-friendly way to collect verification codes, PINs, or other numeric sequences. It automatically manages focus between input slots, supports paste functionality, and provides clear visual feedback for the current input position.

Installation


npm install @strongtie/design-system

import { InputOtp } from "@strongtie/design-system/input-otp"

Components

This module exports the following components:

InputOTP
InputOTPGroup
InputOTPSlot
InputOTPSeparator

Props

`<InputOTP>`

Prop	Type	Default
`maxLength` *	`number`	-
`containerClassName`	`string`	-
`noScriptCSSFallback`	`string \| null`	-
`onChange`	`((newValue: string) => unknown)`	-
`onComplete`	`((...args: any[]) => unknown)`	-
`pasteTransformer`	`((pasted: string) => string)`	-
`pushPasswordManagerStrategy`	`none` \| `increase-width`	-
`render`	`InputOTPRenderFn`	-
`textAlign`	`center` \| `left` \| `right`	-
`value`	`string`	-

`<InputOTPSlot>`

Prop	Type	Default	Description
`index` *	`number`	-

Example

import { InputOtp } from "@strongtie/design-system/input-otp"
 
export default function Example() {
  return <InputOtp>{/* Your content here */}</InputOtp>
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

input-otp
input-otp-group
input-otp-separator
input-otp-slot

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Input Group Input

On This Page

Installation Components Props <InputOTP><InputOTPSlot>Example Styling Classes Accessibility

Contribute