Blazor provides a set of built-in form components under the Microsoft.AspNetCore.Components.Forms namespace that simplify data binding, validation, and submission. These components are essential when building features like user registration, login, or blog post creation.

What are the Key Blazor Form Components?

  • <EditForm> – the container that handles submission and validation.
  • <InputText>, <InputTextArea>, <InputSelect>, <InputCheckbox> – bindable input controls.
  • <ValidationMessage> – displays validation messages for individual fields.
  • <ValidationSummary> – displays a summary of all validation errors.
  • <DataAnnotationsValidator> – enables support for System.ComponentModel.DataAnnotations.

What are the Example Model with Validation?

using System.ComponentModel.DataAnnotations;
public class BlogPost
{ public int Id { get; set; } [Required(ErrorMessage = "Title is required")] [StringLength(100, ErrorMessage = "Max 100 characters")] public string Title { get; set; } [Required(ErrorMessage = "Content is required")] public string Content { get; set; } [Required(ErrorMessage = "Category is required")] public string Category { get; set; } public DateTime CreatedAt { get; set; } = DateTime.Now;
}

CreateBlog.razor – Form Example

@page "/create-blog"
@inject NavigationManager Navigation
<h3>Create Blog Post</h3><EditForm Model="@blog" OnValidSubmit="HandleSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <div class="mb-3"> <label>Title</label> <InputText class="form-control" @bind-Value="blog.Title" /> <ValidationMessage For="@(() => blog.Title)" /> </div> <div class="mb-3"> <label>Content</label> <InputTextArea class="form-control" @bind-Value="blog.Content" /> <ValidationMessage For="@(() => blog.Content)" /> </div> <div class="mb-3"> <label>Category</label> <InputSelect class="form-select" @bind-Value="blog.Category"> <option value="">-- Select Category --</option> <option>Tech</option> <option>Lifestyle</option> <option>Education</option> </InputSelect> <ValidationMessage For="@(() => blog.Category)" /> </div> <button type="submit" class="btn btn-primary">Submit</button></EditForm>@code { private BlogPost blog = new(); void HandleSubmit() { Console.WriteLine($"New blog: {blog.Title}"); Navigation.NavigateTo("/blogs"); }
}

Notes:

  • You can also use custom validation logic by implementing IValidatableObject or using FluentValidation.
  • All input components support @bind-Value, which enables real-time two-way data binding.
  • Blazor ensures the UI updates automatically based on validation results.

Conclusion

Blazor provides built-in form components that make data binding, validation, and submission easy. With tools like EditForm and InputText, you can build dynamic, user-friendly forms quickly. It’s a powerful way to handle forms in modern web apps.