Progress Telerik UI for Blazor

Blazor Form

  • The Telerik UI for Blazor Form component gives you creative freedom to easily set up your next registration, contact or other form needed for your application while keeping it simple!
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Blazor Form Overview

    Creating all sorts of forms is easy with the Telerik UI for Blazor Form component. As with other Blazor components, it gives you creative freedom in how you want to build your next application’s registration page or contact form while also keeping it simple – it can even be autogenerated from your data model!

    Check out the Blazor Form demo

    Telerik UI for Blazor Form - Overview
  • Data Binding

    As mentioned, data can be bound to the Form component which will autogenerate all fields according your model, with different input elements used for different properties in the model (e.g. numbers will use a <NumericTextBox>.) This will both make sure set you the values of your model directly with what the user entered but also save you time. When the form is provided with a data model, it will automatically generate an input field for every property in your model, depending on its type!

    Telerik UI for Blazor Data Binding
  • Orientation and Layout

    The Form can be fit anywhere on the page because it can be oriented both horizontally and vertically. It can render separate columns if you want it to. Configure it so it makes the most sense in your use case!

    Telerik UI for Blazor Form - Layout
  • Custom From Editors

    The Blazor Form UI component has an EditorType parameter that provides a simple way to change the default field editors based on the supplied data type. You have the flexibility to choose between a DatePicker, DateTimePicker or TimePicker for the DateTime type, and a TextBox or TextArea for the string fields.

    See example of custom editors in Blazor Form component.

    Telerik Blazor Form UI Component Custom Editors
  • Form Validation

    The Form can be validated in its entirety through the built-in Blazor validation. This means you can provide validation rules directly on your model using attributes like Required, Range or MaxLength but any field the form contains can also be validated on its own. If you take this approach you wouldn’t even have to write any special logic.

    More than that, Telerik UI for Blazor also provides 3 separate components to display validation errors. Read more about the ValidationSummary, ValidationMessage & ValidationTooltip
    Telerik UI for Blazor Form - Validation
  • Field Configuration

    If you don’t want to autogenerate the form from your data model, you can add a list of <FormItem>s. They can be customized in several ways like changing their appearance, data binding model values, adding hints and so on.

  • Blazor Form Events

    The Form supports 3 events – OnSubmit, OnValidSubmit and OnInvalidSubmit. You can guess when they are broadcast from their names:

    • OnSubmit - on every submit
    • OnValidSubmit – only on submits with valid input data
    • OnInvalidSubmit – only on submits with invalid input data
    Read more about Blazor Form Events in the documentation
    Telerik UI for Blazor Events
  • Form Templates

    The Telerik Blazor Form component can easily customize the label, form editor component and validation message of your app.
    Telerik UI for Blazor Form - Templates
  • ID Parameter

    Use the Form component Id property to reference the component where necessary, for example to mark a button to serve as the “Submit” button for that form.


  • Theming

    The Telerik Blazor Form component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes, style a specific component instance or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application
    Telerik UI for Blazor Form -Theming

All Blazor Components

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.