v0.5.14

OtpInput

Accessible one-time password input component with customizable slot groups and validation states

Installation

pnpm add @wandercom/design-system-web

Usage

5 lines
import { OTPInput } from '@wandercom/design-system-web/ui/otp-input';

export function Example() {
  return <OTPInput maxLength={6} />;
}

Examples

Six-digit OTP input demonstrating default, invalid, and disabled states.

Loading example...

Pattern validation

Restrict input to specific patterns using the pattern prop. This example only accepts numeric digits.

3 lines
import { REGEXP_ONLY_DIGITS } from 'input-otp';

<OTPInput maxLength={6} pattern={REGEXP_ONLY_DIGITS} />

Props

OTPInput

maxLength?:

number
The maximum number of characters allowed in the OTP input. Defaults to 6.

value?:

string
The controlled value of the OTP input.

onChange?:

(value: string) => void
Callback fired when the input value changes.

onComplete?:

(value: string) => void
Callback fired when all slots are filled.

pattern?:

RegExp
Pattern to validate individual characters. Import REGEXP_ONLY_DIGITS or REGEXP_ONLY_CHARS from input-otp for common patterns. Defaults to REGEXP_ONLY_DIGITS.

disabled?:

boolean
Disables the entire OTP input when true.

aria-invalid?:

boolean
Marks all slots as invalid for validation feedback.

containerClassName?:

string
Additional CSS classes to apply to the container element.

className?:

string
Additional CSS classes to apply to the input element.
OtpInput