Skip to main content

Variable: InputOTP

@arolariu/components

@arolariu/components / InputOTP

Variable: InputOTP

const InputOTP: ForwardRefExoticComponent<InputOTPProps & RefAttributes<HTMLInputElement>>

Defined in: components/ui/input-otp.tsx:83

Wraps the input-otp root component with shared library styling.

Remarks​

  • Third-party wrapper component
  • Styling via CSS Modules with --ac-* custom properties
  • Forwards all supported input-otp root props to the underlying primitive

Examples​

<InputOTP maxLength={6} />
<InputOTP pasteTransformer={(text) => text.replace(/\D/g, "")} />

Param​

Required OTP length used to generate the expected number of slots.

Param​

Optional validation pattern forwarded to the underlying input, often paired with REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, or REGEXP_ONLY_DIGITS_AND_CHARS.

Param​

Callback invoked after the user fills all slots with a complete value.

Param​

Controls how password manager UI is handled inside the input container.

Param​

Custom render function for complete control over OTP input rendering. Receives slot data array and allows fully custom layouts.

Param​

Transform pasted text before it is applied. Useful for stripping spaces or dashes from pasted codes.

Param​

Controlled OTP value. Use with onChange for controlled mode.

Param​

Callback fired when the OTP value changes in controlled mode.

Param​

Additional CSS class for the outer container element.

Param​

CSS string to inject for no-JavaScript fallback styling.

Param​

Sets how typed characters are aligned inside the hidden backing input.

See​

// was this page useful?