@fictjs/one-time-password-field

One-time password (OTP) field primitives for Fict, modeled after @radix-ui/react-one-time-password-field. A group of single-character inputs for entering verification codes, with paste, auto-advance, and keyboard support.

Part of ui-primitives, a port of Radix Primitives to Fict.

Unstable API — exported as unstable_OneTimePasswordField from @fictjs/radix-ui. The surface may change in a minor release.

Installation

pnpm add @fictjs/one-time-password-field fict

Usage

/** @jsxImportSource fict */
import * as OneTimePasswordField from '@fictjs/one-time-password-field'

export function Example() {
  return (
    <OneTimePasswordField.Root>
      <OneTimePasswordField.Input index={0} />
      <OneTimePasswordField.Input index={1} />
      <OneTimePasswordField.Input index={2} />
      <OneTimePasswordField.Input index={3} />
      <OneTimePasswordField.HiddenInput />
    </OneTimePasswordField.Root>
  )
}

Anatomy

• Root — value / defaultValue, onValueChange, autoSubmit, disabled, type, validationType (InputValidationType), dir, orientation.
• Input — a single-character input (index).
• HiddenInput — a hidden input that carries the full concatenated value for form submission.

Exports

• Components: OneTimePasswordField (Root), OneTimePasswordFieldInput (Input), OneTimePasswordFieldHiddenInput (HiddenInput), createOneTimePasswordFieldScope.
• Types: OneTimePasswordFieldProps, OneTimePasswordFieldInputProps, OneTimePasswordFieldHiddenInputProps, InputValidationType.

Documentation

The API mirrors @radix-ui/react-one-time-password-field. See the Radix Primitives docs, the ui-primitives overview, and the architecture guide.

License

MIT © Fict contributors.