We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The Syncfusion Blazor Data Form component simplifies form creation in Blazor applications by providing a rich set of features for automatic field generation, layout customization, and seamless data binding. Whether working with simple forms or complex data models, the Data Form component streamlines the development process while offering flexibility for customization.

Blazor Data Form overview.


Editors

The Blazor Data Form component supports built-in editors for primitive data types such as string, integer, date-time, date-only, time-only, and enumeration. It also provides custom editors to enhance the user experience.

TextBox editor in the Blazor Data Form.

Text box editor

Password editor in the Blazor Data Form.

Password editor

Multiline editor in the Blazor Data Form.

Multi-line editor

Numeric editor in the Blazor Data Form.

Numeric editor

Checkbox editor in the Blazor Data Form.

Checkbox editor

Switch editor in the Blazor Data Form.

Switch editor

Autocomplete editor in the Blazor Data Form.

Autocomplete editor

Dropdown list editor in the Blazor Data Form.

Date picker in the Blazor Data Form.

Date picker


Auto-generation of form fields

Automatically generate form fields based on the properties of the data model. Data Form creates built-in components automatically based on the field type, such as TextBox, NumericTextBox, DatePicker, or TextArea. It saves development time by eliminating the need to define each form field manually.

Blazor Data Form with auto-generation.


Blazor Data Form with data binding

Data binding

Enable seamless two-way data binding between the form and the data model. This will ensure that users directly set the values of the model and save time. When the form is provided with a data model, it will automatically generate an input field for every property in the model, depending on its type.


Customizable form fields

The form fields can be customized by changing their appearance, data binding model values, adding placeholders, and more.

Blazor Data Form with customizable form fields.


Blazor Data Form with validation and error handling.

Form validation and error handling

The Blazor Data Form can be validated in its entirety through the built-in Blazor validation and other validation methods. 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 be validated individually. The validation error message can be displayed in three ways: as a validation summary, inline, or using tooltip options.


Custom form editor

The Blazor Data Form component offers a straightforward method to modify the default field editors according to the provided data type. Users can select a date picker, date-time picker, or time picker for the DateTime type, and a text box or text area for the string fields.

Blazor Data Form with custom editor.


Blazor Data Form column layout.

Column layout

The component offers a straightforward method for organizing form fields into multiple columns with column-spanning options, enhancing the visual layout and user experience.


Form group layout

The Blazor Data Form component provides options for grouping the form fields, allowing the organization of related fields together.

Blazor Data Form group layout.


Blazor Data Form template.

Form template

The Data Form component allows easy customization of the labels, form editor component, and validation messages in any use case.


Right to left (RTL) rendering

The Blazor Data Form component supports right-to-left configuration for users who communicate in a right-to-left language script, such as Arabic and Hebrew.

Blazor Data Form with RTL.


Styling and theming

The Data Form offers multiple built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. Users can customize these built-in themes or create new ones in order to achieve the desired appearance and style. This can be done by overriding the Sass variables or utilizing the Theme Studio application.

Accessibility

  • Fully supports WAI-ARIA accessibility practices to work with screen readers and assistive devices.
  • Follows WAI-ARIA best practices for implementing keyboard interaction.
  • Uses UI visual elements such as foreground color, background color, line spacing, text, and images designed based on WCAG 2.0 standards.

Data Form code example

Easily get started with the Blazor Data Form using a few simple lines of C# code, as demonstrated below. Also explore our Blazor Data Form example, which shows how to render and configure the component.

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

<SfDataForm ID="MyForm" Model="@EmployeeDetail">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
    <FormItems>
        <FormAutoGenerateItems />
    </FormItems>
</SfDataForm>

@code {

    public class EmployeeDetails
    {

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

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

        [Required(ErrorMessage = "Please enter email address.")]
        [EmailAddress(ErrorMessage = "Please enter a valid email address.")]
        [Display(Name = "Email")]
        public string Email { get; set; }

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

    }
    private EmployeeDetails EmployeeDetail = new EmployeeDetails();
}


Struggling to decide on the right product?

Our comprehensive competitor comparison of Blazor components will guide you to the perfect choice.

tick-mark 85+ UI components
tick-mark 960+ interactive Blazor demos
tick-mark 2.3M+ downloads
competitive-banner-FT-image

Blazor Components – 85+ UI and DataViz Components

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version
Download Free Trial No credit card required.

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon