PinInput

Use PinInput

PinInput is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, PinInput } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <PinInput label="Verification code" name="code" length={6} autoComplete="one-time-code" required />
    </FloodRoot>
  );
}

Design notes

• One real native input preserves mobile one-time-code autofill, clipboard, selection, forms and required validity; decorative slots are hidden from assistive technology. Use its native ref for focus. The host owns verification and authentication.
• length is an integer from 1 to 12. mode numeric permits ASCII digits; alphanumeric also permits ASCII letters. Paste strips separators and invalid characters, then respects the selection and length. Backspace and arrow editing remain native. Use mask to visually conceal the code.
• Use value/onValueChange or defaultValue. Native form reset restores the initial uncontrolled value. Pattern validity requires a complete code when nonempty; required also rejects an empty code. Translate label and preserve its accessible name with hideLabel. Available in 0.2.5.

API reference