Blazor Form Overview

The Form for Blazor allows you to generate a form based on your model and to manage customized forms. You can control the component through various parameters, achieve the desired layout by using the default editor or add custom ones, set the orientation and organize those editors in groups and columns.

The Form component is part of Telerik UI for Blazor, a professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor Form

To use the Form component with a model:

1. Use the TelerikForm tag to add the component to your razor page.

2. Provide an object to the Model parameter of the component or an EditContext class to the EditContext parameter.

3. Use the <FormValidation> tag and in it, provide a validator - like the DataAnnotationsValidator that comes with the framework, to enable form validation.

@* Provide a model to the Telerik Form *@

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@person">
    <FormValidation>
        <DataAnnotationsValidator />
    </FormValidation>
</TelerikForm>

@code {
    public Person person = new Person();

    public class Person
    {
        [Editable(false)]
        public int Id { get; set; }

        [Required]
        [MaxLength(20, ErrorMessage = "The first name should be maximum 20 characters long")]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required]
        [MaxLength(25, ErrorMessage = "The last name should be maximum 25 characters long")]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }

        [Required]
        [Display(Name = "Date of Birth")]
        public DateTime? DOB { get; set; }
    }
}

@* Provide an EditContext to the TelerikForm *@

@using System.ComponentModel.DataAnnotations

<TelerikForm EditContext="@MyEditContext">
    <FormValidation>
        <DataAnnotationsValidator />
    </FormValidation>
</TelerikForm>

@code {
    public EditContext MyEditContext { get; set; }

    public Person person = new Person();

    protected override void OnInitialized()
    {
        MyEditContext = new EditContext(person);
    }

    public class Person
    {
        [Editable(false)]
        public int Id { get; set; }

        [Required]
        [MaxLength(20, ErrorMessage = "The first name should be maximum 20 characters long")]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required]
        [MaxLength(25, ErrorMessage = "The last name should be maximum 25 characters long")]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }

        [Required]
        [Display(Name = "Date of Birth")]
        public DateTime? DOB { get; set; }
    }
}

Form Items

There are three ways to generate fields in the Blazor Form:

• Define FormItems manually.
• Allow the Form to automatically generate items.
• Combine the above two options.

The Form Items allow you customize the default editors. [See the FormItems article for more information....

Automatic Generation of Fields

The Telerik Form can generate editors for you based on the model fields. It can take them from both a Model, or the EditContext, whichever you provide to it. You can use data annotation attributes to validate the field values and customize the auto-generated form fields, for example set labels, visibility and editability.

The following data types are supported out-of-the box and they use the following default editors:

Data Type	Default Editor
string	Telerik TextBox
int, double, float, decimal	Telerik NumericTextBox
Enum	Telerik DropDownList
DateTime	Telerik DatePicker
bool	Telerik CheckBox

Customize the Automatically Generated Field Editors

You can customize the automatically generated field editors by providing the EditorType attribute, exposed on the <FormItem>, or by using the FormItem Template. The EditorType attribute accepts a member of the FormEditorType enum:

Field data type	FormEditorType enum members
String	FormEditorType.TextArea FormEditorType.TextBox
Boolean	FormEditorType.CheckBox FormEditorType.Switch
DateTime	FormEditorType.DatePicker FormEditorType.DateTimePicker FormEditorType.TimePicker

@* The usage of the EditorType parameter *@

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@person">
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidation>
    <FormItems>
        <FormItem Field="@nameof(Person.Id)" LabelText="Id"></FormItem>
        <FormItem Field="@nameof(Person.FirstName)"
                  EditorType="@FormEditorType.TextArea"
                  LabelText="First name">
        </FormItem>
        <FormItem Field="@nameof(Person.LastName)" 
                  EditorType="@FormEditorType.TextArea"
                  LabelText="Last name">
        </FormItem>
        <FormItem Field="@nameof(Person.DOB)"
                  EditorType="@FormEditorType.DateTimePicker"
                  LabelText="Date of birth">
        </FormItem>
    </FormItems>
</TelerikForm>

@code {
    public Person person = new Person();

    public class Person
    {
        public int Id { get; set; } = 10;
        public string FirstName { get; set; } = "John";
        public string LastName { get; set; } = "Doe";
        public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20);
    }
}

Data Annotation Attributes

The Telerik Form for Blazor supports validation through the <DataAnnotationsValidator />. This allows you to take advantage of all validation attributes from the data annotation attributes list provided by .NET.

The Form also uses the the following attributes from the model:

• [Display(Name = "Field Caption")] - to get the title (caption) of the field name to render out as its label.

• [Display(AutoGenerateField = false)] - to skip a class member and not create a FormItem for it.

• [Editable(false)] - to render the built-in editor as disabled so the user cannot change its value.

You can customize the editors further through the form items. Explicit settings you provide through the parameters will take precedence over data annotation attributes.

Form Parameters

Parameter	Type and Default value	Description
Model	object	The object bound to the Form. It will automatically create the EditContext and using the two together is not supported.
EditContext	EditContext	The EditContext of the form.
ValidationMessageType	FormValidationMessageType enum (Inline)	Defines the type of the Validation messages. See the Validation article for more information.
Id	string	Sets an id attribute to the <form> element. It is possible to use it together with the Form parameter of a submit button. Set both parameters to the same string value. This allows submitting the form from a button, which is outside the form.

Form Layout Customization

The Blazor Form exposes multiple parameters that allow you to customize its layout:

Parameter	Type and Default value	Description
Width	string	Controls the width of the Form.
Columns	int	Defines the number of columns in the Form. See the Columns article for more information
ColumnSpacing	string	Defines the amout of vertical space between the Columns. See the Columns article for more information.
Orientation	FormOrientation enum (Vertical)	controls the orientation of the Form. See the Orientation article for more information.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor Form:

Parameter	Type	Description
Size	Telerik.Blazor.ThemeConstants.Form.Size	Adjust the size of the Form

You can find more information for customizing the Form appearance in the Appearance article.

Form Reference

Use the Form reference to get access to its EditContext. The Form generates this object, no matter if the component uses a Model or an EditContext parameter. You can validate the EditContext manually or re-attach validation when you change the model - FormReference.EditContext.AddDataAnnotationsValidation().

Get a reference to the Telerik Form for Blazor

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@TeamMate" @ref="@FormRef" Width="300px">
    <FormValidation>
        <DataAnnotationsValidator />
    </FormValidation>
</TelerikForm>

@code {
    private TelerikForm FormRef { get; set; }

    private Employee TeamMate { get; set; } = new();

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            FormRef?.EditContext.Validate();
        }

        base.OnAfterRender(firstRender);
    }

    public class Employee
    {
        [Display(AutoGenerateField = false)]
        public int Id { get; set; }
        [Required]
        [MinLength(2, ErrorMessage = "{0} should be at least {1} characters.")]
        public string Name { get; set; }
        [Required]
        public DateTime? BirthDate { get; set; }
    }
}

Next Steps

• Validate the Form
• Explore the Form events
• Learn more about the Form Buttons
• Group the FormItems

See Also

• Live Demo: Form
• API Reference