Introducing the New Blazor Data Form Component
Tags: blazor, development, ui, web
Published: 2024-01-19 12:39:31

---
title: Introducing the New Blazor Data Form Component
published: true
date: 2024-01-18 13:17:35 UTC
tags: blazor, development, ui, web
canonical_url: https://www.syncfusion.com/blogs/post/new-blazor-data-form.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr3ppq8j2gsy3mtk0dny.png
---
We’re thrilled to unveil the latest addition to our toolkit: the [Syncfusion Blazor Data Form](https://www.syncfusion.com/blazor-components/blazor-data-form "Blazor Data Form Component") component, a highlight of our [2023 Volume 4 release](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4"). This eagerly anticipated feature has garnered significant attention and support in our [feedback portal](https://www.syncfusion.com/feedback/13388/form-builder-component-for-blazor "Syncfusion Feedback Portal").

Let’s delve into the features of this new component, exploring its functionalities, UI design, and practical implementations through code examples.

## Blazor Data Form: an overview

The Syncfusion Blazor Data Form component is a powerful tool that simplifies the process of form creation within Blazor apps. It offers a comprehensive suite of features that allow for automatic field generation, layout customization, and seamless data binding. Whether you’re dealing with simple forms or complex data models, this component is designed to streamline your development process while providing ample room for customization.

With the built-in options, you can effortlessly design the appearance, positioning, and behavior of individual form components. Standard functionalities such as accessibility, keyboard interactions, and events are supported. Additionally, Data Form incorporates industry-standard themes such as Material, Fabric, and Bootstrap, allowing you to maintain a consistent look and feel across your app.

## Ease of use

The Blazor Data Form allows you to create various forms, such as registration or login forms. They can be automatically generated from your data model using other Blazor components. You can customize the component through various properties, use default or custom editors, and organize the form fields in groups and columns.

**Note:** Refer to our [Getting Started with Blazor Data Form documentation](https://blazor.syncfusion.com/documentation/data-form/getting-started "Getting started with Blazor Data Form") for more in-depth guidance.

## Key features

The Blazor Data Form component boasts several key features.

- [Auto generation](#Auto)
- [Form validation](#Form)
- [Fluent validation](#Fluent)
- [Validation display](#Validation)
- [Form group](#Group)
- [Columns](#Columns)
- [Templates](#Templates)

Let’s explore them with code examples.

### <a name="Auto">Auto generation</a>

To [auto-generate](https://blazor.syncfusion.com/documentation/data-form/autogeneration "Configuring auto-generation in Blazor DataForm") an entire form based on the provided model class or **EditContext** , the Data Form component utilizes built-in Syncfusion form components like [TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox "Blazor TextBox"), [Numeric Textbox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox "Blazor Numeric TextBox"), [DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker "Blazor DatePicker"), and [Checkbox](https://www.syncfusion.com/blazor-components/blazor-checkbox "Blazor Checkbox"). You can use data annotation attributes to validate the field values and customize the auto-generated form fields.

Refer to the following code example.

```xml
<SfDataForm ID="MyForm" Model="@FieldTypeModel" Width="50%">

    <FormItems>
      <FormAutoGenerateItems />
    </FormItems>

</SfDataForm>

@code {

    private FieldTypes FieldTypeModel = new FieldTypes();
}
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Auto-generating-form-items-using-Blazor-Data-Form.png" alt="Auto-generating form items using Blazor Data Form" style="width:100%">

  <figcaption>Auto-generating form items using Blazor Data Form</figcaption>

</figure>

### <a name="Form">Form validation</a>

The Blazor Data Form can be validated entirely through built-in [Blazor edit form](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform?view=aspnetcore-7.0 "EditForm Class in Blazor") validation. Users can provide validation rules directly on the model using attributes such as **Required** , **Range** , or **MaxLength**. Additionally, any field that the form contains can also be validated individually.

```xml
@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations
@using System.ComponentModel

<SfDataForm ID="MyForm" Model="@FieldTypeModel" Width="50%">

    <FormValidator>
       <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
       <FormAutoGenerateItems />
    </FormItems>

</SfDataForm>

@code {

    public class FieldTypes
    {
        [Display(Name = "ID")]
        [Editable(false)]
        public int IntField { get; set; } = 1002;

        [Required(ErrorMessage = "Please enter your name.")]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "Please enter your last name.")]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }

        [Required(ErrorMessage = "Please enter your age.")]
        [Range(10, 100, ErrorMessage = "Age should between 10 and 100")]
        [Display(Name = "Age")]
        public int? Age { get; set; }

        [Required(ErrorMessage = "Please enter your date of birth.")]
        [Display(Name = "Date Of Birth")]
        public DateOnly? DOB { get; set; }
        
        [Required(ErrorMessage = "Please choose the country.")]
        public Country Country { get; set; }

        [Required(ErrorMessage = "Please agree with the terms.")]
        [Display(Name = "Terms and Conditions")]
        [Range(typeof(bool), "true", "true", ErrorMessage = "Please agree with the terms.")]
        public bool AcceptTerms { get; set; }
    }
    private FieldTypes FieldTypeModel = new FieldTypes();
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Data-annotation-validation-in-Blazor-Data-Form.png" alt="Data annotation validation in Blazor Data Form" style="width:100%">

  <figcaption>Data annotation validation in Blazor Data Form</figcaption>

</figure>

### <a name="Fluent">Fluent validation</a>

The Blazor Data Form supports third-party validation libraries integrating with the standard EditContext, such as [FluentValidation](https://docs.fluentvalidation.net/en/latest/ "Getting Started with FluentValidation").

Refer to the following code example.

```xml
@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Calendars
@using FluentValidation
@using Blazored.FluentValidation

<SfDataForm ID="MyForm"
            Model="@PaymentDetailsModel"
            Width="50%">
    <FormValidator>
        <FluentValidationValidator Validator="PaymentDetailsValidation" />
    </FormValidator>
    <FormItems>
        <FormItem Field="@nameof(PaymentDetailsModel.Name)" LabelText="Full Name on Card"></FormItem>
        <FormItem Field="@nameof(PaymentDetailsModel.CardNumber)" LabelText="Card Number"></FormItem>
        <FormItem Field="@nameof(PaymentDetailsModel.ExpirationDate)" LabelText="Expiration Date">
            <Template>
                <label class="e-form-label">Expiration Date</label>
                <SfDatePicker EnableMask="true" Format="MM/yy" @bind-Value="@PaymentDetailsModel.ExpirationDate">
                </SfDatePicker>
            </Template>
        </FormItem>
        <FormItem Field="@nameof(PaymentDetailsModel.CVV)">
            <Template>
                <label class="e-form-label">CVV/CVC</label>
                <SfMaskedTextBox Mask="000" PromptChar="@PromptCharacter" @bind-Value="@PaymentDetailsModel.CVV"></SfMaskedTextBox>
            </Template>
        </FormItem>
        <FormItem Field="@nameof(PaymentDetailsModel.BillingAddress)" LabelText="Billing Address" EditorType="FormEditorType.TextArea">
        </FormItem>
        <FormItem Field="@nameof(PaymentDetailsModel.Accept)" EditorType="FormEditorType.Switch" LabelText="I agree to the terms and conditions"></FormItem>
    </FormItems>

    <FormButtons>
        <SfButton>Pay</SfButton>
    </FormButtons>

</SfDataForm>

@code {

    char PromptCharacter { get; set; } = ' ';

    public class PaymentDetails
    {

        [Required(ErrorMessage = "Enter Name on the card")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Enter Billing Address")]
        public string BillingAddress { get; set; }

        [Required(ErrorMessage = "Enter Card number")]
        public string CardNumber { get; set; }

        [Required(ErrorMessage = "Enter Count here")]
        public DateTime? ExpirationDate { get; set; }

        [Required(ErrorMessage = "Enter CVV/CVC")]
        public string CVV { get; set; }

        [Required(ErrorMessage = "You need to agree to the Terms and Conditions")]
        [Range(typeof(bool), "true", "true", ErrorMessage = "You need to agree to the Terms and Conditions")]
        public bool Accept { get; set; }
    }

    private PaymentDetails PaymentDetailsModel = new PaymentDetails();

    PaymentDetailsValidator PaymentDetailsValidation = new PaymentDetailsValidator();

    public class PaymentDetailsValidator : AbstractValidator<PaymentDetails>
    {
        public PaymentDetailsValidator()
        {
            RuleFor(customer => customer.Name).NotEmpty().MinimumLength(3).WithMessage("Name should greater than 3 characters ").MaximumLength(50).WithMessage("Name should not contains more than 50 characters");
            RuleFor(customer => customer.CardNumber).NotEmpty().WithMessage("Please enter credit card number").CreditCard().WithMessage("Entered number is not a valid credit card number.");
            RuleFor(customer => customer.ExpirationDate).NotEmpty().WithMessage("Please enter expiration date");
            RuleFor(customer => customer.CVV).NotEmpty().Length(3);
            RuleFor(customer => customer.BillingAddress).NotEmpty().WithMessage("Please specify a billing address");
            RuleFor(customer => customer.Accept).Equal(true).WithMessage("You must accept the terms and conditions to proceed further");
        }
    }
}
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Fluent-validation-support-in-Blazor-Data-Form.png" alt="Fluent validation support in Blazor Data Form" style="width:100%">

  <figcaption>Fluent validation support in Blazor Data Form</figcaption>

</figure>

### <a name="Validation">Validation display</a>

Customize the appearance of validation messages, displaying them inline as tooltips or hiding them altogether by setting the [ValidationDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ValidationDisplayMode "ValidationDisplayMode property of Blazor Data Form") property.

```xml
<SfDataForm ID="MyForm" Width="50%"
            Model="@RegistrationModel"
            ValidationDisplayMode="FormValidationDisplay.Tooltip">
</SfDataForm>
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/The-validation-message-displayed-in-the-tooltip.png" alt="The validation message displayed in the tooltip" style="width:100%">

  <figcaption>The validation message displayed in the tooltip</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/The-validation-message-displayed-inline.png" alt="The validation message displayed inline" style="width:100%">

  <figcaption>The validation message displayed inline</figcaption>

</figure>

### <a name="Group">Form group</a>

The Blazor Data Form offers options for grouping form fields, allowing the organization of related fields. This feature enables the use of descriptive headings and a columnar structure, enhancing your forms’ clarity and organization. Refer to the following code example.

```xml
<SfDataForm ID="MyForm"
            Model="@EmployeeDetails">
    <FormItems>
        <FormGroup LabelText="Employee Information">
            <FormItem Field="@nameof(EmployeeDetails.FirstName)" LabelText="First Name" />
            <FormItem Field="@nameof(EmployeeDetails.LastName)" LabelText="Last Name" />
            <FormItem Field="@nameof(EmployeeDetails.Designation)" LabelText="Designation" />
        </FormGroup>
        <FormGroup LabelText="Personal Data">
            <FormItem Field="@nameof(EmployeeDetails.DateOfBirth)" EditorType="FormEditorType.DatePicker" LabelText="Date of birth" />
            <FormItem Field="@nameof(EmployeeDetails.PersonalMailId)" LabelText="Personal Mail" Placeholder="someone@example.com" />
            <FormItem Field="@nameof(EmployeeDetails.AddressLine)" EditorType="FormEditorType.TextArea" LabelText="Address" />
        </FormGroup>
    </FormItems>
</SfDataForm>

@code {
    private EmployeeDetail EmployeeDetails = new EmployeeDetail();

 }
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Form-group-in-Blazor-Data-Form-1.png" alt="Form group in Blazor Data Form" style="width:100%">

  <figcaption>Form group in Blazor Data Form</figcaption>

</figure>

### <a name="Columns">Columns</a>

Enhance the visual layout and user experience by customizing form fields into single or multiple columns. Specify the [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ColumnCount "ColumnCount property of Blazor Data Form") in [SfDataForm](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html "SfDataForm class in Blazor") and [ColumnSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_ColumnSpan "ColumnSpan property of Blazor Data Form") in individual form fields.

```xml
 <SfDataForm ID="MyForm"
                Model="@EmployeeDetail" ColumnCount="2" ColumnSpacing="10px" ButtonsAlignment="FormButtonsAlignment.Center" Width="40%">

  </SfDataForm>
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Customizing-the-number-of-columns-and-span-in-Blazor-Data-Form-1.png" alt="Customizing the number of columns and span in Blazor Data Form" style="width:100%">

  <figcaption>Customizing the number of columns and span in Blazor Data Form</figcaption>

</figure>

### <a name="Templates">Templates</a>

Customize the entire form UI appearance using HTML elements or other Syncfusion components via the [FormTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormTemplate.html "FormTemplate property of Blazor Data Form") property. Refer to the following code example.

```xml
<SfDataForm ID="MyForm"
                Model="ProductDetailsModel">
        <FormTemplate>
            <SfAccordion ExpandMode="ExpandMode.Single">
                <AccordionItems>
                    <AccordionItem Expanded="true">
                        <HeaderTemplate>Product Info</HeaderTemplate>
                        <ContentTemplate>
                            <div class="product-details">
                                <div class="form-group">
                                    <label class="e-form-label">Category</label>
                                    <SfTextBox @bind-Value="ProductDetailsModel.Category" Readonly="true" />
                                </div>
                            </div>
                        </ContentTemplate>
                    </AccordionItem>
                    <AccordionItem Expanded="false">
                        <HeaderTemplate>Payment Details</HeaderTemplate>
                        <ContentTemplate>
                            <div class="payment-info">
                                <div class="form-group">
                                    <label class="e-form-label">Contact Number</label>
                                    <SfMaskedTextBox Mask="+(00) 0000000000" @bind-Value="ProductDetailsModel.ContactNumber" />
                                </div>
                            </div>
                        </ContentTemplate>
                    </AccordionItem>
                </AccordionItems>
            </SfAccordion>
        </FormTemplate>
    </SfDataForm>
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Template-feature-in-Blazor-Data-Form.png" alt="Template feature in Blazor Data Form" style="width:100%">

  <figcaption>Template feature in Blazor Data Form</figcaption>

</figure>

## References

For more details, refer to the [Blazor Data Form documentation](https://blazor.syncfusion.com/documentation/data-form/getting-started#add-blazor-dataform-component "Getting started with Blazor Data Form") and [demos](https://blazor.syncfusion.com/demos/data-form/default-functionalities?theme=fluent "Blazor Data Form live demo").

## Conclusion

Thanks for reading! We’ve explored the new [Blazor Data Form](https://www.syncfusion.com/blazor-components/blazor-data-form "Blazor Data Form Component") component, a remarkable addition to our [2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release. This powerful control is designed to improve your app development process, and we’re eager to hear your thoughts on it. Your feedback is invaluable to us, so don’t hesitate to share your insights in the comments section.

For a detailed overview of all the exciting updates in this release, we invite you to visit our [Release Notes](https://blazor.syncfusion.com/documentation/release-notes/24.1.41?type=all "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew/blazor-components "Essential Studio What’s New") pages.

For our existing customers, the new version of Essential Studio is now available on the [License and Downloads](https://www.syncfusion.com/account/login "Essential Studio License and Downloads page") page. If you’re new to Syncfusion, sign up for a [30-day free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products") to try our controls for yourself.

If you have any questions, you can reach us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We’re always happy to assist you.

## Related blogs

- [What’s New in Blazor: 2023 Volume 4](https://www.syncfusion.com/blogs/post/whats-new-blazor-2023-volume-4.aspx "Blog: What’s New in Blazor: 2023 Volume 4")
- [Easily Integrate the Syncfusion Blazor PDF Viewer in Your .NET MAUI Apps](https://www.syncfusion.com/blogs/post/blazor-pdf-viewer-in-dotnet-maui.aspx "Blog: Easily Integrate the Syncfusion Blazor PDF Viewer in Your .NET MAUI Apps")
- [Exploring the Richness of Annotation Types in Blazor PDF Viewer](https://www.syncfusion.com/blogs/post/annotations-blazor-pdf-viewer.aspx "Blog: Exploring the Richness of Annotation Types in Blazor PDF Viewer")
- [Easily Explore Complex Geographical Structures with Layers and Sublayers in Blazor Maps](https://www.syncfusion.com/blogs/post/layers-sub-layers-blazor-maps.aspx "Blog: Easily Explore Complex Geographical Structures with Layers and Sublayers in Blazor Maps")