Validation in Blazor TextBox Component

29 Nov 20241 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