Input OTP
A one-time password input with individual character slots. Commonly used for verification codes and two-factor authentication.
Basic 6-Digit OTP
A standard 6-digit OTP input with two groups of 3 digits separated by a dash.
Current value: (empty)
4-Digit PIN
A simple 4-digit PIN input without separators.
PIN value: (empty)
Alphanumeric Code
This OTP input accepts both letters and numbers using a custom pattern.
Alphanumeric code: (empty)
Disabled State
The OTP input can be disabled to prevent user interaction.
This input is disabled and cannot be edited.
Controlled with Verification
Shows controlled mode with a simulated verification process when the OTP is complete. The input shows error styling when verification fails.
Current value: (empty)
Hint: Enter 123456 for successful verification.
Error State
Use AriaInvalid to display the OTP input in an error state with destructive (red) styling.
This input is in an error state.
Keyboard Navigation
The OTP input supports full keyboard navigation.
Value: (empty)
- ← / → to navigate between slots
- Backspace to clear and move to previous slot
- Delete to clear current slot
- Home / End to jump to first/last slot
- Paste a complete code to auto-fill all slots
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Length | int | 6 | Total number of OTP character slots. |
| Value | string | "" | The current OTP value. Supports two-way binding with @bind-Value. |
| Pattern | string? | — | Regex pattern to validate each character input. |
| Disabled | bool | false | When true, the input cannot be interacted with. |
| AriaInvalid | bool | false | When true, applies destructive (red) error styling to all slots. |
| OnComplete | EventCallback<string> | — | Fired when all slots have been filled. |