OTPInput

OTPInput is built for account verification, two-factor flows, and short PIN entry.

#Default usage

<OTPInput defaultValue="4320" length={6} />

#Import

import { OTPInput, PinInput } from "@froggdesign/enter-ui-react";

#States

#Accessibility

Each slot is a named input, uses numeric input mode, and the first slot advertises one-time-code autocomplete. Paste accepts a full code and normalizes it to digits.

#API

• length controls slot count.
• value, defaultValue, and onValueChange control the code.
• disabled and invalid map to aria state and data attributes.
• PinInput is an alias for PIN wording.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.