Class

TelerikForm

Declaration

public TelerikForm()

Controls browser autocomplete behavior for the entire form using standard HTML autocomplete values. Use "on" to enable browser autocomplete for faster form filling, "off" to disable it for sensitive data. Accepts specific autocomplete values like "new-password" for new password fields or "current-password" for login forms. This setting applies to all form fields unless individual fields override it with their own autocomplete attributes. Helpful for improving user experience in frequently used forms or securing sensitive data entry.

Declaration

[Parameter]
public string AutoComplete { get; set; }

Property Value

Controls the horizontal alignment of form action buttons within their container area. Start aligns buttons to the left side of the form. Center centers buttons horizontally for balanced appearance. End aligns buttons to the right side, following common form conventions. Stretch makes buttons expand to fill available width equally. When not specified, defaults automatically based on Orientation - horizontal forms use End, vertical forms use Start.

Declaration

[Parameter]
public FormButtonsLayout? ButtonsLayout { get; set; }

Property Value

Controls the horizontal spacing between columns in multi-column form grid layouts. Accepts any valid CSS length value such as "16px", "1rem", "2em", or "1%". Only takes effect when Columns is set to a value greater than 1 to enable grid layout. Use larger values like "48px" for more spacious layouts, or smaller values like "16px" for compact designs. Default value is "32px" providing balanced spacing suitable for most form designs.

Declaration

[Parameter]
public string ColumnSpacing { get; set; }

Property Value

Specifies the number of columns for automatic grid-based form layout when using auto-generated fields. When set to a value greater than 0, form fields automatically arrange themselves in a CSS Grid with the specified number of columns. Use values like 2 for two-column layouts, 3 for three-column layouts, etc. Set to 0 (default) for single-column stacked layout. Works together with ColumnSpacing and RowSpacing to control spacing between grid items. Best suited for forms with many fields that can benefit from horizontal organization.

Declaration

[Parameter]
public int Columns { get; set; }

Property Value

Specifies the form's edit context for advanced validation scenarios and custom validation logic. Use this when you need full control over form validation state, field tracking, and validation messages. Cannot be used together with Model - provide either EditContext or Model, not both. Typically used in complex forms where you manage validation programmatically or integrate with custom validation frameworks.

Declaration

[Parameter]
public EditContext EditContext { get; set; }

Property Value

Defines custom action buttons that appear at the bottom of the form. When not specified, the form automatically renders a default Submit button. Use this to add custom buttons like Save, Cancel, Reset, or to completely replace the default submit behavior. Buttons placed here have access to the form's EditContext and can trigger custom form submission logic. Common scenarios include multi-step forms, forms with preview functionality, or custom save operations.

Declaration

[Parameter]
public RenderFragment FormButtons { get; set; }

Property Value

Defines the form input fields and their organization within the form layout. Use this to manually specify which fields to display, their labels, validation rules, and custom editors. When not provided, the form automatically generates fields from the Model properties using reflection. Allows full control over field ordering, grouping, and custom input components beyond standard auto-generated fields. Children: FormItem and FormGroup tags.

Declaration

[Parameter]
public RenderFragment FormItems { get; set; }

Property Value

Defines a custom template for rendering form items with full control over the layout and structure. Use this for advanced scenarios where you need to completely customize how form fields are arranged and displayed. The template receives a FormItemsTemplateContext containing all form items in their original structure and order from FormItems. Items can be either IFormItem for individual fields or IFormGroup for grouped fields, allowing complex nested layouts. Requires manual rendering using TelerikFormItemRenderer for fields and TelerikFormGroupRenderer for groups. Children: TelerikFormItemRenderer and TelerikFormGroupRenderer tags.

Declaration

[Parameter]
public RenderFragment<FormItemsTemplateContext> FormItemsTemplate { get; set; }

Property Value

Defines the form validation components area that appears before form fields and buttons. Use this to add validation components that apply to the entire form, such as validation summaries or custom validation displays. Renders at the top of the form, above FormItems and FormButtons. Common usage includes DataAnnotationsValidator for enabling data annotation validation and ValidationSummary for displaying all validation errors in one place. Children: validation components like DataAnnotationsValidator, ValidationSummary, etc.

Declaration

[Parameter]
public RenderFragment FormValidation { get; set; }

Property Value

Assigns a unique HTML id attribute to the form element for accessibility, testing, and DOM manipulation. Use this when you need to reference the form programmatically with JavaScript, associate it with external labels, or target it in CSS. The id should be unique within the page to maintain valid HTML and avoid conflicts with other elements. Common scenarios include form submission handling, automated testing selectors, and accessibility improvements.

Declaration

[Parameter]
public string Id { get; set; }

Property Value

Specifies the data model object that the form will bind to and edit. When provided without FormItems, the form automatically generates input fields for all public properties using reflection and data annotations. Cannot be used together with EditContext - provide either Model or EditContext, not both. Use this for simple forms where automatic field generation is sufficient, such as editing a Person object with Name, Email, and Age properties.

Declaration

[Parameter]
public object Model { get; set; }

Property Value

Handles failed form submissions when validation rules fail and the form contains invalid data. Automatically triggers after form submission if any field validation fails or validation errors exist. Use this to display error messages, highlight invalid fields, or prevent navigation when data is incomplete. Must be used together with OnValidSubmit when implementing automatic validation handling - cannot be combined with OnSubmit. The EditContext parameter contains validation error information that can be used to guide user corrections.

Declaration

[Parameter]
public EventCallback<EditContext> OnInvalidSubmit { get; set; }

Property Value

Handles form submission events with full control over validation timing and custom submission logic. Fires whenever the form is submitted, regardless of validation state, allowing manual validation handling and custom workflows. Cannot be used together with OnValidSubmit and OnInvalidSubmit - choose either OnSubmit for manual control or the valid/invalid pair for automatic validation handling. Use this when you need to implement custom validation logic, multi-step submission processes, or integrate with external validation systems. The EditContext parameter provides access to the form's current state and validation information.

Declaration

[Parameter]
public EventCallback<EditContext> OnSubmit { get; set; }

Property Value

Triggers whenever a form field value changes, providing real-time tracking of user input and form modifications. Use this for implementing auto-save functionality, live validation feedback, audit trails, or dynamic form behavior based on field changes. The FormUpdateEventArgs contains the changed field name and the updated model object for detailed change tracking. Fires for all field types including text inputs, dropdowns, checkboxes, and custom editors within the form. Ideal for scenarios requiring immediate response to user input without waiting for form submission.

Declaration

[Parameter]
public EventCallback<FormUpdateEventArgs> OnUpdate { get; set; }

Property Value

Handles successful form submissions when all validation rules pass and the form data is valid. Automatically triggers after form submission if all field validation succeeds and no validation errors exist. Use this for standard form processing like saving data to a database, calling APIs, or navigating to confirmation pages. Must be used together with OnInvalidSubmit when implementing automatic validation handling - cannot be combined with OnSubmit. The EditContext parameter contains the validated form data ready for processing.

Declaration

[Parameter]
public EventCallback<EditContext> OnValidSubmit { get; set; }

Property Value

Controls the visual arrangement of form field labels relative to their input controls. Vertical (default) places labels above input fields, ideal for mobile-friendly layouts and narrow screens. Horizontal places labels beside input fields, saving vertical space and suitable for desktop layouts with wider screens. This setting affects the default ButtonsLayout behavior - horizontal orientation defaults to End, vertical defaults to Start.

Declaration

[Parameter]
public FormOrientation Orientation { get; set; }

Property Value

Controls the vertical spacing between rows in multi-column form grid layouts. Accepts any valid CSS length value such as "16px", "1rem", "2em", or "1%". Only takes effect when Columns is set to a value greater than 1 to enable grid layout. Use this to fine-tune the vertical rhythm of your form - larger values for more breathing room, smaller for compact layouts. When not specified, the browser uses default grid row spacing.

Declaration

[Parameter]
public string RowSpacing { get; set; }

Property Value

Controls the overall visual size and spacing of form elements using predefined theme size constants. Use "small" for compact forms with tighter spacing, "medium" (default) for standard business applications, or "large" for enhanced accessibility and touch-friendly interfaces. This setting affects all form elements including labels, inputs, buttons, and spacing to maintain consistent visual hierarchy. The size value should match theme constants from ThemeConstants.Form.Size for proper theming integration.

Declaration

[Parameter]
public string Size { get; set; }

Property Value

Controls how validation error messages are displayed to users when form fields contain invalid data. Inline (default) shows error messages directly below each invalid input field for immediate feedback. Tooltip displays error messages in tooltips when hovering over invalid fields, saving screen space. None hides individual field error messages, useful when showing only a ValidationSummary component.

Declaration

[Parameter]
public FormValidationMessageType ValidationMessageType { get; set; }

Property Value

Sets the overall width of the form container using any valid CSS width value. Accepts values like "400px" for fixed pixel width, "100%" for full container width, "50vw" for viewport-relative width, or "auto" for content-based sizing. Use this to constrain form width for better readability on wide screens or to fit forms within specific layout requirements. When not specified, the form takes up the available width of its parent container.

Declaration

[Parameter]
public string Width { get; set; }

Property Value

Declaration

protected override void BuildRenderTree(RenderTreeBuilder builder)

Parameters

Overrides ComponentBase.BuildRenderTree(RenderTreeBuilder)

Validates all form fields and returns whether the entire form contains valid data. Triggers validation for all fields and displays any validation error messages according to the ValidationMessageType setting. Use this method to programmatically check form validity before custom processing, such as enabling save buttons or performing complex business logic. Returns true when all fields pass their validation rules, false when any field contains invalid data or validation errors exist. This method does not submit the form - use it for validation checks without triggering submission events.

Declaration

public bool IsValid()

Returns

Declaration

protected override void OnParametersSet()

Overrides ComponentBase.OnParametersSet()

Forces the form component to re-render and update its visual state immediately. Use this method when form data or settings change programmatically and you need the UI to reflect those changes instantly. Common scenarios include updating form fields after external data changes, refreshing validation states, or responding to dynamic model updates. This method triggers a complete component refresh without affecting form validation or submission state.

Declaration

public void Refresh()

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Returns

Overrides ComponentBase.SetParametersAsync(ParameterView)