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.

Telerik UI for Blazor Ninja image

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.

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:

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

See Also

In this article