Input Components
Wrappers around existing HTML inputs. Inherit from InputBase. Include basic validation:
InputCheckboxInputDate(date picker)- Registers unparseable values as validation errors
InputFile(file picker) (see ASP.NET Core Blazor file uploads)InputNumber- Registers unparseable values as validation errors
InputSelect(dropdown)InputRadioInputRadioGroup(group of number ofInputRadioComponents; allow only one in the group to be selected)InputTextInputTextArea(multi-line)
Error message template support
InputDate and InputNumber both support error message templates to provide a custom error message:
<label>
Production Date:
<InputDate @bind-Value="starship.ProductionDate"
DisplayName="Production Date"
ParsingErrorMessage="The {0} field has an incorrect date value." />
</label>
InputText
<EditForm Model="@Employee">
<!-- 2-way data binding with @bind-value: -->
<InputText id="lastName" @bind-value="@Employee.LastName" placeholder="Enter last name"></InputText>
</EditForm>
Using HTML’s oninput event with InputText
Create a custom component based on InputText.
Assuming this model:
ExampleModel.cs
using System.ComponentModel.DataAnnotations;
public class ExampleModel
{
[Required]
[StringLength(10, ErrorMessage = "Name is too long.")]
public string? Name { get; set; }
}
Inherit the InputText component and set the event binding to the ‘oninput’ event:
Shared/CustomInputText.razor
@inherits InputText
<input @attributes="AdditionalAttributes"
class="@CssClass"
@bind="CurrentValueAsString"
@bind:event="oninput" />
Use the component:
@page "/form-example-7"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample7> Logger
<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<CustomInputText @bind-Value="exampleModel.Name" />
<button type="submit">Submit</button>
</EditForm>
<p>
CurrentValue: @exampleModel.Name
</p>
@code {
private ExampleModel exampleModel = new();
private void HandleValidSubmit()
{
Logger.LogInformation("HandleValidSubmit called");
// Process the valid form
}
}
InputSelect
<InputSelect id="country" class=form-control col-sm-8" @bind-value="@Employee.CountryId">
@foreach (var country in Countries)
{
<option value="@country.CountryId">@country.Name</option>
}
</InputSelect>
Multi-Option Selection with InputSelect
Bind multiple options by setting the @bind-value to an array type. Doing so also makes the HTML multiple attribute optional:
<!-- starship.SelectedClassification is an array type: -->
<InputSelect @bind-Value="starship.SelectedClassification">
<option value="@Classification.Exploration">Exploration</option>
<option value="@Classification.Diplomacy">Diplomacy</option>
<option value="@Classification.Defense">Defense</option>
<option value="@Classification.Research">Research</option>
</InputSelect>
The @onchange event provides an array of the selected options via event arguments (ChangeEventArgs).