Form Field Input OTP

A pre-composed form field that wraps a BbInputOTP control with automatic label, helper text, and error message display. Inherits from FormFieldBase, which provides EditContext integration, auto-generated control IDs, ARIA attribute wiring, and validation error state management.

Default

A basic FormFieldInputOTP with a label, helper text, and two-way binding via @bind-Value. The component renders 6 input boxes in groups of 3 by default with a separator between groups.
-
Enter the 6-digit code sent to your email

Value: —

Masked PIN

Set MaskInput to true to mask the input for security-sensitive fields like PINs. Use Length and GroupSize to configure a 4-digit layout with no separator.

Alphanumeric

Set InputMode to InputOTPInputMode.LettersAndNumbers to accept both letters and digits. This is useful for license keys or alphanumeric verification codes.
-
Enter your 8-character license key

Disabled

Set Disabled to true to prevent user interaction. The input boxes and label display with reduced opacity.
-
Verification is not available at this time.

EditForm Validation

Inside an EditForm, validation errors from DataAnnotationsValidator display automatically. Try submitting without entering the full code.

Two-Factor Authentication

Enter the code from your authenticator app.

-