Auto-submit OTP Input OTP for React

The field's completion callback calls the same submit function as the form. onComplete fires when the code reaches maxLength.

The form's submit handler runs the same check as auto-submit, so a code shorter than six shows Your one-time password must be 6 characters. in FieldError instead of being sent.

invalid on Field follows the error, and FieldError shows the message under the description. The error clears on the next valid submit.

The example shows the result in a status line under the form instead of calling an API. Replace that with your request, and show its error in FieldError when the code is rejected. Here it reads Code submitted: and the code.

FieldLabel sets htmlFor to otp-auto-submit, the id on InputOTP, which it passes to its input.

When a wrong code has a cost, such as locking the account after a few tries, or when people need to review it. Use a submit button then, as the Form with Validation example does.