{"id":1531,"date":"2025-06-27T11:18:53","date_gmt":"2025-06-27T11:18:53","guid":{"rendered":"https:\/\/www.cmarix.com\/qanda\/?p=1531"},"modified":"2026-02-05T12:00:49","modified_gmt":"2026-02-05T12:00:49","slug":"what-components-are-used-for-forms-in-blazor","status":"publish","type":"post","link":"https:\/\/www.cmarix.com\/qanda\/what-components-are-used-for-forms-in-blazor\/","title":{"rendered":"What are the Components Used For Forms In Blazor?"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are the Key Blazor Form Components?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;EditForm> \u2013 the container that handles submission and validation.<\/li>\n\n\n\n<li>&lt;InputText>, &lt;InputTextArea>, &lt;InputSelect>, &lt;InputCheckbox> \u2013 bindable input controls.<\/li>\n\n\n\n<li>&lt;ValidationMessage> \u2013 displays validation messages for individual fields.<\/li>\n\n\n\n<li>&lt;ValidationSummary> \u2013 displays a summary of all validation errors.<\/li>\n\n\n\n<li>&lt;DataAnnotationsValidator> \u2013 enables support for System.ComponentModel.DataAnnotations.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What are the Example Model with Validation?<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>using System.ComponentModel.DataAnnotations;\n\npublic class BlogPost\n{\n    public int Id { get; set; }\n\n    &#91;Required(ErrorMessage = \"Title is required\")]\n    &#91;StringLength(100, ErrorMessage = \"Max 100 characters\")]\n    public string Title { get; set; }\n\n    &#91;Required(ErrorMessage = \"Content is required\")]\n    public string Content { get; set; }\n\n    &#91;Required(ErrorMessage = \"Category is required\")]\n    public string Category { get; set; }\n\n    public DateTime CreatedAt { get; set; } = DateTime.Now;\n}<\/code><\/pre>\n\n\n\n<p><strong>CreateBlog.razor \u2013 Form Example<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@page \"\/create-blog\"\n@inject NavigationManager Navigation\n\n&lt;h3>Create Blog Post&lt;\/h3>\n\n&lt;EditForm Model=\"@blog\" OnValidSubmit=\"HandleSubmit\">\n    &lt;DataAnnotationsValidator \/>\n    &lt;ValidationSummary \/>\n\n    &lt;div class=\"mb-3\">\n        &lt;label>Title&lt;\/label>\n        &lt;InputText class=\"form-control\" @bind-Value=\"blog.Title\" \/>\n        &lt;ValidationMessage For=\"@(() => blog.Title)\" \/>\n    &lt;\/div>\n\n    &lt;div class=\"mb-3\">\n        &lt;label>Content&lt;\/label>\n        &lt;InputTextArea class=\"form-control\" @bind-Value=\"blog.Content\" \/>\n        &lt;ValidationMessage For=\"@(() => blog.Content)\" \/>\n    &lt;\/div>\n\n    &lt;div class=\"mb-3\">\n        &lt;label>Category&lt;\/label>\n        &lt;InputSelect class=\"form-select\" @bind-Value=\"blog.Category\">\n            &lt;option value=\"\">-- Select Category --&lt;\/option>\n            &lt;option>Tech&lt;\/option>\n            &lt;option>Lifestyle&lt;\/option>\n            &lt;option>Education&lt;\/option>\n        &lt;\/InputSelect>\n        &lt;ValidationMessage For=\"@(() => blog.Category)\" \/>\n    &lt;\/div>\n\n    &lt;button type=\"submit\" class=\"btn btn-primary\">Submit&lt;\/button>\n&lt;\/EditForm>\n\n@code {\n    private BlogPost blog = new();\n\n    void HandleSubmit()\n    {\n        Console.WriteLine($\"New blog: {blog.Title}\");\n        Navigation.NavigateTo(\"\/blogs\");\n    }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Notes:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can also use custom validation logic by implementing IValidatableObject or using FluentValidation.<\/li>\n\n\n\n<li>All input components support @bind-Value, which enables real-time two-way data binding.<\/li>\n\n\n\n<li>Blazor ensures the UI updates automatically based on validation results.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>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\u2019s a powerful way to handle forms in modern web apps.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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? What are the Example Model with Validation? CreateBlog.razor \u2013 Form Example Notes: Conclusion Blazor [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1532,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,3],"tags":[],"class_list":["post-1531","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dot-net","category-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/comments?post=1531"}],"version-history":[{"count":3,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1531\/revisions"}],"predecessor-version":[{"id":1651,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1531\/revisions\/1651"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media\/1532"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media?parent=1531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/categories?post=1531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/tags?post=1531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}