Blazorise OneTimeInput component

The OneTimeInput component is built for verification codes, one-time passwords, short grouped tokens, and recovery keys.

Instead of asking users to type everything into one long field, OneTimeInput breaks the value into clear slots. Typing moves forward automatically, pasted values fill the remaining slots, and grouping helps the value stay easy to scan.

Use it for SMS codes, email confirmation flows, sign-in challenges, office codes, or any short identifier where readability and speed matter.

To use the OneTimeInput component, install the Blazorise.Components package first.

Installation

NuGet

Install extension from NuGet. 
dotnet add package Blazorise.Components

Imports

In your main _Imports.razor add: 
@using Blazorise.Components

How it works

  • Digits controls how many slots are rendered.
  • Group adds separators such as 2,3 to produce layouts like XX-XXX.
  • When Group is not set and the input has at least 6 slots, grouping is applied automatically in blocks of 3.
  • Standard Blazorise validation works because OneTimeInput inherits from BaseInputComponent.

Examples

Verification code

Start with a 6-digit code. This is the most common OTP layout and it automatically groups into two blocks of 3.
-
Value: (empty)
<Field>
    <FieldLabel>Verification code</FieldLabel>
    <FieldBody>
        <OneTimeInput @bind-Value="@verificationCode"
                      Digits="6"
                      Autofocus />
    </FieldBody>
</Field>

<Div Margin="Margin.Is3.FromTop">
    <Span TextWeight="TextWeight.SemiBold">Value:</Span>
    <Code>@(string.IsNullOrWhiteSpace( verificationCode ) ? "(empty)" : verificationCode)</Code>
</Div>

@code {
    private string verificationCode;
}

Custom grouping

Use the Group parameter when your code format is not a standard 3-and-3 split.
-
Value: (empty)
<Field>
    <FieldLabel>Office code</FieldLabel>
    <FieldBody>
        <OneTimeInput @bind-Value="@officeCode"
                      Digits="5"
                      Group="2,3" />
    </FieldBody>
</Field>

<Div Margin="Margin.Is3.FromTop">
    <Span TextWeight="TextWeight.SemiBold">Value:</Span>
    <Code>@(string.IsNullOrWhiteSpace( officeCode ) ? "(empty)" : officeCode)</Code>
</Div>

@code {
    private string officeCode;
}

Validation

Use OneTimeInput inside Validation and Validations just like any other Blazorise input.
-
<Validations @ref="@validations" Mode="ValidationMode.Manual">
    <Validation UsePattern>
        <Field>
            <FieldLabel RequiredIndicator>Security code</FieldLabel>
            <FieldBody>
                <OneTimeInput @bind-Value="@securityCode"
                              Digits="6"
                              Pattern="[0-9]{6}">
                    <Feedback>
                        <ValidationError>Please enter all 6 digits.</ValidationError>
                    </Feedback>
                </OneTimeInput>
            </FieldBody>
        </Field>
    </Validation>

    <Button Color="Color.Primary" Clicked="@ValidateCode">
        Validate
    </Button>
</Validations>

@code {
    private Validations validations;
    private string securityCode;

    private Task ValidateCode()
    {
        return validations.ValidateAll();
    }
}

Text mode

Switch to text input when the value can contain letters, such as a recovery key or grouped invitation token.
-
Value: A1B2
<Field>
    <FieldLabel>Recovery key</FieldLabel>
    <FieldBody>
        <OneTimeInput @bind-Value="@recoveryKey"
                      Digits="8"
                      Group="4,4"
                      Role="TextRole.Text"
                      InputMode="TextInputMode.Text" />
    </FieldBody>
</Field>

<Div Margin="Margin.Is3.FromTop">
    <Span TextWeight="TextWeight.SemiBold">Value:</Span>
    <Code>@(string.IsNullOrWhiteSpace( recoveryKey ) ? "(empty)" : recoveryKey)</Code>
</Div>

@code {
    private string recoveryKey = "A1B2";
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page