- bit BlazorUI
Home Docs
  • Inputs
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming

    • OtpInput

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

    Usage

    Basic
    Basic usage examples of BitOtpInput, including different lengths, disabled state, auto-shift, and autofocus.


    Basic




    Disabled




    Length = 4




    AutoShift




    AutoFocus

    Label
    Label can express the title of the otp inputs.


    Label:






    LabelTemplate:


    Type
    Set different input types for the OTP input: text, number, and password.





    Directions
    Demonstrating various layout directions for BitOtpInput: default, reversed, vertical, and reversed vertical.







    Binding
    Examples of one-way and two-way data binding with BitOtpInput.



    Events
    Handle various events in BitOtpInput, including change, fill, focus, input, keydown, and paste events.

    OnChange value:


    OnFill value:


    Focus type:
    Input index:


    Focus type:
    Input index:


    Value:
    Input index:


    Key & Code: [] []
    Input index:


    Focus type:
    Input index:
    Validation
    Use data annotations to validate the BitOtpInput component in a form submission scenario.



    Size
    Varying sizes for inputs tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.





    Style & Class
    Explore styling and class customization for BitOtpInput, including component styles, custom classes, and detailed styles.


    Component's Style & Class:





    Styles & Classes:


    RTL
    Use BitOtpInput in right-to-left (RTL).




    API

    BitOtpInput parameters
    Name
    Type
    Default value
    Description
    AutoFocus bool false If true, the first input is auto focused.
    AutoShift bool false Enables auto shifting the indexes while clearing the inputs using Delete or Backspace.
    Classes BitOtpInputClassStyles? null Custom CSS classes for different parts of the BitOtpInput.
    Label string? null Label displayed above the inputs.
    LabelTemplate RenderFragment? null Custom template for the label displayed above the inputs.
    Length int 5 Length of the OTP or number of the inputs.
    OnFill EventCallback<string?> Callback for when all of the inputs are filled.
    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.
    Reversed bool false Defines whether to render inputs in the opposite direction.
    Size BitSize? null The size of the inputs.
    Styles BitOtpInputClassStyles? null Custom CSS styles for different parts of the BitOtpInput.
    Type BitInputType? null Type of the inputs.
    Vertical bool false Defines whether to render inputs vertically.
    BitOtpInput public members
    Name
    Type
    Default value
    Description
    InputElements ElementReference[] The ElementReferences to the input elements of the BitOtpInput.
    FocusAsync ValueTask Gives focus to a specific input element 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.
    Name string? null Gets or sets the name of the element. Allows access by name from the associated form.
    OnChange EventCallback<TValue?> Callback for when the input value changes.
    ReadOnly bool false Makes the input read-only.
    Required bool false Makes the input required.
    Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
    BitInputBase public members
    Name
    Type
    Default value
    Description
    InputElement ElementReference The ElementReference of the input element.
    FocusAsync() () => ValueTask Gives focus to the input element.
    FocusAsync(bool preventScroll) (bool preventScroll) => ValueTask Gives focus to the input element.
    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.
    Dir BitDir? null Determines the component direction.
    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.
    Label string? null Custom CSS classes/styles for the label of the otp input.
    InputsWrapper string? null Custom CSS classes/styles for the wrapper element of the inputs.
    Input string? null Custom CSS classes/styles for each input in otp input.
    Focused string? null Custom CSS classes/styles for the focused input in otp input.
    BitSize enum
    Name
    Value
    Description
    Small 0 The small size.
    Medium 1 The medium size.
    Large 2 The large size.
    BitInputType enum
    Name
    Value
    Description
    Text 0 The input expects text characters.
    Password 1 The input expects password characters.
    Number 2 The input expects number characters.
    Email 3 The input expects email characters.
    Tel 4 The input expects tel characters.
    Url 5 The input expects url characters.
    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).
    BitDir enum
    Name
    Value
    Description
    Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
    Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
    Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.
    • On this page