- bit BlazorUI

OtpInput

The OTP input is used for MFA procedure of authenticating users by a one-time password.

Usage

Basic
Basic

Length

Disabled

AutoFocus
InputType
Text

Number

Password
Direction
Left to right

Right to left

Top to bottom

Bottom to top
Style & Class
Component's Style & Class:




Styles & Classes:

Binding
One-way

Two-way
Events
OnChange
OnChange value:

OnFocusIn
Focus type:
Input index:

OnFocusOut
Focus type:
Input index:

OnInput
Value:
Input index:

OnKeyDown
Key & Code: [] []
Input index:

OnPaste
Focus type:
Input index:
Validation

Implementation

BitOtpInput parameters
Name
Type
Default value
Description
AutoFocus bool false If true, the first input is auto focused.
Classes BitOtpInputClassStyles? null Custom CSS classes for different parts of the BitOtpInput.
Direction BitOtpInputDirection BitOtpInputDirection.LeftToRight The render direction of the inputs.
InputType BitOtpInputType BitOtpInputType.Text Type of the inputs.
Length int 5 Length of the OTP or number of the inputs.
OnChange EventCallback<string?> Callback for when the OtpInput value changes.
OnFocusIn EventCallback<FocusEventArgs> onfocusin event callback for each input.
OnFocusOut EventCallback<FocusEventArgs> onfocusout event callback for each input.
OnInput EventCallback<ChangeEventArgs> oninput event callback for each input.
OnKeyDown EventCallback<KeyboardEventArgs> onkeydown event callback for each input.
OnPaste EventCallback<ClipboardEventArgs> onpaste event callback for each input.
Styles BitOtpInputClassStyles? null Custom CSS styles for different parts of the BitOtpInput.
BitInputBase parameters
Name
Type
Default value
Description
DisplayName string? null Gets or sets the display name for this field.
InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitOtpInputClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the otp input.
Input string? null Custom CSS classes/styles for each input in otp input.
BitOtpInputDirection enum
Name
Value
Description
LeftToRight 0 The OtpInput showed in the left to right direction.
RightToLeft 1 The OtpInput showed in the right to left direction.
TopToBottom 2 The OtpInput showed in the top to bottom direction.
BottomToTop 3 The OtpInput showed in the bottom to top direction.
BitOtpInputType enum
Name
Value
Description
Text 0 The OtpInput characters are shown as text.
Password 1 The OtpInput characters are masked.
Number 2 The OtpInput characters are number.
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).