@corvu-next/otp-field

One-time password input component for SolidJS 2.0 with auto-advance, pattern validation, and password manager compatibility.

Note: This is the Solid 2.0 fork of corvu. It targets [email protected].

Features

• Auto-advance cursor on input
• Pattern validation (numeric, alphanumeric, or custom regex)
• Password manager autofill compatibility
• Exposes context: value, activeSlots, isFocused, isInserting
• Paste support across all slots
• Controlled and uncontrolled state

Installation

npm install @corvu-next/otp-field
# or
pnpm add @corvu-next/otp-field

Usage

import OtpField from '@corvu-next/otp-field'

function MyOtpField() {
  return (
    <OtpField.Root maxLength={6} pattern="[0-9]">
      <OtpField.Input />
    </OtpField.Root>
  )
}

Accessing context

function MyOtpField() {
  return (
    <OtpField.Root maxLength={6}>
      {(ctx) => (
        <>
          <OtpField.Input />
          <p>Current value: {ctx.value()}</p>
          <p>Focused: {ctx.isFocused() ? 'yes' : 'no'}</p>
        </>
      )}
    </OtpField.Root>
  )
}

API

| Component | Description | |-----------|-------------| | OtpField.Root | Container. Props: maxLength, pattern, value/onValueChange for controlled mode. Context callback provides value, activeSlots, isFocused, isInserting. | | OtpField.Input | Hidden input element that handles user interaction and password manager integration. |

Further Reading

This package is part of corvu-next, a collection of unstyled, accessible and customizable UI primitives for SolidJS 2.0.