Separator in Blazor OTP Input

14 Aug 20261 minute to read

The separator in the OTP input component is the character or string rendered between adjacent input fields to visually distinguish them. Configure the separator using the Separator property. The separator is display-only and is not included in the OTP value.

Single character separator

A single character can be used as a separator to visually group input fields, for example /, -, or |.

@using Syncfusion.Blazor.Inputs

<SfOtpInput Separator="/"></SfOtpInput>

Blazor OTP Input Component with Separator

Multi-character separator

A string of multiple characters can also be used as a separator. Since the Separator property accepts a string, you can use any combination of characters, such as symbols, arrows, or repeated characters.

@using Syncfusion.Blazor.Inputs

<SfOtpInput Separator="••"></SfOtpInput>

Blazor OTP Input Component with Multi-Character Separator

See also