Input OTP
A one-time password input component for verification codes with automatic focus management, grouping separators, and size variants. Supports clipboard paste — pasting a code fills all slots automatically. Ideal for two-factor authentication, email verification, and PIN entry flows.
Default
The default
InputOTP renders a 6-digit input split into groups of 3 with a dash separator. Each slot accepts a single digit and automatically advances focus to the next slot on input. Bind to a string with @bind-Value for two-way data binding.4 Digits
Set
Length to 4 for a shorter PIN-style input. Combine with GroupSize="4" and ShowSeparator="false" for a compact layout without visual breaks. This pattern is common for bank PINs and short verification codes.Custom Separator
Use the
Separator render fragment to provide a custom element between groups. This example uses a minus icon from Lucide instead of the default dash character. Any content can be placed in the separator, including icons, text, or custom elements.Sizes
Control the input box dimensions with the
Size parameter. Available sizes are Small (compact forms), Default (standard use), and Large (touch-friendly interfaces). The font size and padding scale proportionally with each size variant.Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes to the container. This example demonstrates a custom border accent with a gradient background, useful for branding-specific verification pages or highlighted input sections.Masked
Set
Mask="true" to hide entered characters behind asterisks (*). The bound Value still contains the original characters. Useful for PIN entry and sensitive verification codes.Input Mode
Use
InputMode to control which characters are accepted: Numbers (default, digits only), Letters (a-z, A-Z only), or LettersAndNumbers (both). Non-matching characters are silently ignored.Disabled
Set
Disabled to true to prevent user interaction. Disabled inputs have reduced opacity and do not accept keyboard input, making them suitable for showing previously submitted codes or temporarily locked verification flows.Verification Flow
A real-world composition showing the
InputOTP in an email verification card with a title, description, and submit button. Use the OnComplete callback to detect when all digits have been entered, enabling automatic form submission without requiring the user to click a button.