Validation in Blazor TextBox Component

7 Jul 20221 minute to read

The TextBox supports three types of validation styles namely error, warning, and success. These states are enabled by adding corresponding classes .e-error, .e-warning, or .e-success to the input parent element.

@using Syncfusion.Blazor.Inputs

<label>Success</label>
<SfTextBox Placeholder="Enter your address" CssClass="e-success" ></SfTextBox>

<label>Error</label>
<SfTextBox Placeholder="Enter your address" CssClass="e-error"></SfTextBox>

<label>Warning</label>
<SfTextBox Placeholder="Enter your address" CssClass="e-warning"></SfTextBox>

Validation in Blazor TextBox

Limit no of character count

You can limit the number of characters by setting maxlength attribute using HtmlAttributes property.

@using Syncfusion.Blazor.Inputs
<SfTextBox Placeholder='First Name' HtmlAttributes="@htmlattribute"></SfTextBox>
@code {
   Dictionary<string, object> htmlattribute = new Dictionary<string, object>() 
    { 
           { "maxlength", "10" }, 
    };
}

TextBox supports to set the attributes directly also.

@using Syncfusion.Blazor.Inputs
<SfTextBox Placeholder='First Name' maxlength="10"></SfTextBox>

See also