Added in v2.1

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.

Install-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

Basic verification code

Start with a 6-digit code. This is the most common OTP layout and it automatically groups into two blocks of 3.

Verification code

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.

Office code

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.

Security code

Please enter all 6 digits.

<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.

Recovery key

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

Parameters

Parameter	Description	Type	Default
`AriaDescribedBy`	Gets or sets the aria-describedby attribute value. Remarks When set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation.	`string`
`AriaInvalid`	Gets or sets the aria-invalid attribute value. Remarks When set, this value is rendered as-is and overrides the validation-derived aria-invalid state.	`string`
`AriaLabelledBy`	Gets or sets the aria-labelledby attribute value. Remarks When set, this value is rendered as-is. Some non-labelable controls can otherwise derive it automatically from a parent FieldLabel or FieldsLabel.	`string`
`AriaRequired`	Gets or sets the aria-required attribute value. Remarks When set, this value overrides the required-field state resolved from the parent Validation.	`bool`	`false`
`Autofocus`	Set's the focus to the component after the rendering is done.	`bool`	`false`
`ChildContent`	Specifies the content to be rendered inside this OneTimeInput.	`RenderFragment`	`null`
`Digits`	Gets or sets the number of input slots to render.	`int`	`6`
`Disabled`	Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.	`bool`	`false`
`Feedback`	Placeholder for validation messages.	`RenderFragment`	`null`
`Group`	Gets or sets the slot grouping definition, such as `2,3`.	`string`
`InputMode`	Gets or sets the input mode used by each slot input. Possible values:`None`, `Text`, `Tel`, `Url`, `Email`, `Numeric`, `Decimal`, `Search`	`TextInputMode`	`Numeric`
`Pattern`	Gets or sets the regex pattern used by pattern-based validation.	`string`
`ReadOnly`	Add the readonly boolean attribute on an input to prevent modification of the input’s value.	`bool`	`false`
`Role`	Gets or sets the role of each slot input. Possible values:`Text`, `Email`, `Password`, `Url`, `Search`, `Telephone`	`TextRole`	`Text`
`Size`	Sets the size of the input control.	`Size?`	`null`
`TabIndex`	If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.	`int?`	`null`
`Value`	Gets or sets the value inside the input field.	`TValue`	`null`
`ValueExpression`	Gets or sets an expression that identifies the input value.	`Expression<Func<TValue>>`	`null`

Events

Event	Description	Type
`Blur`	The blur event fires when an element has lost focus.	`EventCallback<FocusEventArgs>`
`CustomValidationValue`	Used to provide custom validation value on which the validation will be processed with the Validator handler. Remarks Should be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList.	`Func<TValue>`
`FocusIn`	Occurs when the input box gains focus.	`EventCallback<FocusEventArgs>`
`FocusOut`	Occurs when the input box loses focus.	`EventCallback<FocusEventArgs>`
`KeyDown`	Occurs when a key is pressed down while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyPress`	Occurs when a key is pressed while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyUp`	Occurs when a key is released while the control has focus.	`EventCallback<KeyboardEventArgs>`
`OnFocus`	Occurs when the input box gains or loses focus.	`EventCallback<FocusEventArgs>`
`ValueChanged`	Occurs after value has changed.	`EventCallback<TValue>`

Methods

Method	Description	Return	Parameters
`Focus`	Sets the focus on the underline element.	`Task`	`bool scrollToElement`
`Revalidate`	Forces the Validation (if any is used) to re-validate with the new custom or internal value.	`Task`