Blazor TextInput
The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'text'.
Basic usage
# Example View Source
<div class="mb-3">
<TextInput @bind-Value="@enteredText" />
</div>
<div class="mb-3">Entered text: @enteredText</div>
@code {
private string? enteredText = null;
}Text alignment
# You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
Example View Source
<div class="mb-3">
<TextInput @bind-Value="@enteredText" TextAlignment="Alignment.Center" />
</div>
<div class="mb-3">Entered text: @enteredText</div>
<div class="mb-3">
<TextInput @bind-Value="@enteredText2" TextAlignment="Alignment.End" />
</div>
<div class="mb-3">Entered text: @enteredText2</div>
@code {
private string? enteredText = "sample text";
private string? enteredText2 = "sample text 2";
}Disable
# Use the Disabled parameter to disable the TextInput.
<div class="mb-3">
<TextInput @bind-Value="@enteredText" Disabled="@disabled" Placeholder="Enter text" />
</div>
<div class="mb-3">Entered text: @enteredText</div>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
@code {
private string? enteredText = null;
private bool disabled = true;
private void Enable() => disabled = false;
private void Disable() => disabled = true;
private void Toggle() => disabled = !disabled;
}
Also, use Enable() and Disable() methods to enable and disable the TextInput.
Do not use both the Disabled parameter and Enable() & Disable() methods.
<div class="mb-3">
<TextInput @ref="textInputRef" @bind-Value="@enteredText" Placeholder="Enter text" />
</div>
<div class="mb-3">Entered text: @enteredText</div>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
@code {
private TextInput? textInputRef;
private string? enteredText = null;
private void Disable() => textInputRef.Disable();
private void Enable() => textInputRef.Enable();
} Max length
# Use the MaxLength parameter to set the maximum length of the TextInput.
Example View Source
<div class="mb-3">
<TextInput @bind-Value="@enteredText" MaxLength="5" />
</div>
<div class="mb-3">Entered text: @enteredText</div>
@code {
private string? enteredText = null;
}Valdations
#
Like any other blazor input component, TextInput supports validations.
Add the DataAnnotations on the TextInput component to validate the user input before submitting the form.
In the below example, we used Required attribute.
Example View Source
@using System.ComponentModel.DataAnnotations
<style>
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
</style>
<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
<DataAnnotationsValidator />
<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">First Name: <span class="text-danger">*</span></label>
<div class="col-md-10">
<TextInput @bind-Value="@employee.FirstName" Placeholder="Enter first name" />
<ValidationMessage For="@(() => employee.FirstName)" />
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">Last Name: <span class="text-danger">*</span></label>
<div class="col-md-10">
<TextInput @bind-Value="@employee.LastName" Placeholder="Enter last name" />
<ValidationMessage For="@(() => employee.LastName)" />
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
<Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Submit</Button>
</div>
</div>
</EditForm>
@code {
private Employee employee = new();
private EditContext? editContext;
protected override void OnInitialized()
{
editContext = new EditContext(employee);
base.OnInitialized();
}
public void HandleOnValidSubmit()
{
// additional check
if (editContext.Validate())
{
// do something
// submit the form
Console.WriteLine("Form submitted successfully");
}
}
private void ResetForm()
{
employee = new();
editContext = new EditContext(employee);
}
public class Employee
{
[Required(ErrorMessage = "First name required.")]
public string? FirstName { get; set; }
[Required(ErrorMessage = "Last name required.")]
public string? LastName { get; set; }
}
}Events: ValueChanged
# This event fires when the TextInput value changes, but not on every keystroke.
Example View Source
<div class="mb-3">
<TextInput Value="@employeeName" ValueExpression="() => employeeName" ValueChanged="(value) => EmployeeNameChanged(value)" />
</div>
<div class="mb-3">Entered employee name: @employeeName</div>
@code {
private string? employeeName = null;
private void EmployeeNameChanged(string? value)
{
employeeName = value;
// do something
}
} 