Blazor Form - Overview

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
  • Overview.razor
  • User.cs
Loading the demo source code...please wait.
blazor ui ninja image

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

Description

The Telerik UI for Blazor Form component lets you generate and manage forms. It includes multiple built-in features such as two orientation modes (horizontal and vertical), using the form with a model and EditContext class, Columns and ColumnSpacing parameter for organizing the form layout into columns, validation (DataAnnotationsValidator as well as any validator that is compatible with the EditForm and EditContext), grouping form items, localized error messages and templates for rendering custom content. The Blazor Form component also adds a Submit button at the end of the component by default. You can add your own buttons through the FormButtons tag.

The current demo shows a detailed declaration of a customized Blazor Form UI component, which includes custom editors, labels and validation messages. The customization of the automatically generated fields works by using the FormItem Template. Alternatively, you can also provide the EditorType attribute, which accepts a member of the FormEditorType enum in the <FormItem>. Note that when the Template option is used, the built-in validation messages from the Form will not be rendered. Instead, you need to use the Telerik Validation tools to provide validation messages or any other suitable component such as the ValidationMessage that comes with the framework.

To achieve a responsive layout of the Blazor Form, you can easily integrate it with the Telerik UI for Blazor MediaQuery component. That way, different content will be rendered based on dimension conditions.

This Form Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.