OTP Field

An accessible and customizable OTP Input component for SolidJS.

Features Section titled Features

• Renders as a single input; Supports all default keybindings and is accessible
• Supports Android and iOS copy, paste, and cut
• Automatically removes visual separators when pasting (e.g. 123-456 -> 123456)
• Can retrieve OTP codes from out-of-channel mechanisms, such as SMS, email, or auth apps.

Installation Section titled Installation

npm install @corvu/otp-field

The OTP Field is also included in the main corvu package under corvu/otp-field.

Usage Section titled Usage

import OtpField from '@corvu/otp-field' // 'corvu/otp-field'
// or
// import { Root, Input } from '@corvu/otp-field'

The OTP Field primitive renders an invisible input field (<OtpField.Input />) on top of the visible slots. This allows you to style the input field as you like while keeping the input field accessible. corvu takes care of syncing the selection, focus and hover states between the input and your UI.

Anatomy Section titled Anatomy

<OtpField>
<OtpField.Input />
</OtpField>

Basic Usage Section titled Basic Usage

A simple usage of the OTP Field, using the context to manage the state of the UI:

const OtpFieldExample = () => {
return (
  <div>
    <OtpField maxLength={6}>
      <OtpField.Input aria-label="Verification Code" />
      <Slot index={0} />
      <Slot index={1} />
      <Slot index={2} />
      <Slot index={3} />
      <Slot index={4} />
      <Slot index={5} />
    </OtpField>
  </div>
)
}

const Slot = (props: { index: number }) => {
const context = OtpField.useContext()
const char = () => context.value()[props.index]
const showFakeCaret = () =>
  context.value().length === props.index && context.isInserting()

return (
  <div>
    {char()}
    <Show when={showFakeCaret()}>
      <span>|</span>
    </Show>
  </div>
)
}

Integration with form libraries Section titled Integration with form libraries

The OTP Field can easily be used with form libraries like Modular Forms as you have full control over the input field:

import { createForm, submit } from '@modular-forms/solid'
import OtpField from '@corvu/otp-field'

function OtpForm() {
const [form, { Form, Field }] = createForm<{
  otp: string
}>()

return (
  <Form
    onSubmit={(values) => {
      // Submit form
    }}
  >
    <Field name="otp">
      {(field, props) => (
        <OtpField maxLength={6} onComplete={() => submit(form)}>
          <OtpField.Input {...props} />
          ...
        </OtpField>
      )}
    </Field>
  </Form>
)
}

The form automatically submits when the OTP Field is filled because we’re calling submit(form) inside the onComplete callback.

Accessibility Section titled Accessibility

The OTP Field renders as a single native input element, which means it supports all standard keybindings and is accessible by default.

It is suggested that you add a label to describe the input:

<OtpField maxLength={6}>
<OtpField.Input aria-label="Verification Code" />
</OtpField>

Limitations Section titled Limitations

To ensure accessibility for screen readers assistive technology, the OTP Field renders a single input field that gets placed invisibly above the slots with position: absolute; inset: 0px;. The slots are visual only, i.e. mouse and touch interactions are restricted. You cannot select a specific field to edit it with the mouse or drag a selection on touch devices.

Credits Section titled Credits

The implementation of this OTP Field is inspired by Guilherme’s React OTP Input.

API reference Section titled API reference