Class FormGroup

Inheritance

System.Object

FormGroup

Namespace: Syncfusion.Blazor.DataForm

Assembly: Syncfusion.Blazor.dll

Syntax

public class FormGroup : OwningComponentBase, IFormItems

Constructors

FormGroup()

Declaration

public FormGroup()

Properties

ColumnCount

Gets or sets the number of columns in the field group's grid layout.

Declaration

public int ColumnCount { get; set; }

Property Value

Type	Description
System.Int32	An `int` specifying the column count for the group layout. The default value is `1`.

Remarks

The ColumnCount property determines how many columns are rendered for child fields in this form group. Higher values result in more columns and distribute fields accordingly for a more compact or complex layout. When designing forms with multiple fields, increase column count to organize input fields efficiently; setting a greater value will create a more condensed grid.

Examples

<FormGroup ColumnCount="2">
  <FormItem Field="PhoneNumber" />
  <FormItem Field="Email" />
</FormGroup>

ColumnSpacing

Gets or sets the spacing between columns in the layout grid of the form group.

Declaration

public string ColumnSpacing { get; set; }

Property Value

Type	Description
System.String	A `string` representing the CSS spacing value (such as "16px", "2em", or "1rem"). The default is `String.Empty` (no explicit spacing).

Remarks

Use this property to add or modify the horizontal spacing between columns for fields in the FormGroup. Spacing is expressed using CSS units and impacts the visual separation between group fields.

Adjusting ColumnSpacing helps maintain readability and keeps forms less crowded, particularly in multi-column layouts.

Examples

<FormGroup ColumnSpacing="24px" />

ColumnSpan

Gets or sets the number of columns that a field cell in this group spans within the parent layout.

Declaration

public int ColumnSpan { get; set; }

Property Value

Type	Description
System.Int32	An `int` value indicating the span (number of columns occupied) by an individual field cell. The default is `1`.

Remarks

Use ColumnSpan to make a form field occupy more than one column in the grid layout. This is useful for fields that require more space, such as text areas or wide input components. Values greater than 1 will expand the cell accordingly; ensure that the total span doesn't exceed the ColumnCount.

Examples

<FormGroup ColumnSpan="2">
  <FormItem Field="Address" />
</FormGroup>

CssClass

Gets or sets one or more custom CSS classes for styling the field group of the SfDataForm component.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A `string` containing one or more CSS class names. The default value is `String.Empty`.

Remarks

This property allows you to apply custom styles to the field group. Add any valid CSS class names to change colors, fonts, spacing, borders, or other appearance-related aspects of the group. The property can accept multiple classes separated by spaces, and classes defined here are appended to the default ones.

Examples

<FormGroup CssClass="my-custom-class another-class" />

ID

Gets or sets the unique identifier for the FormGroup component field group.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A `string` specifying the unique ID of the form group. The default is `String.Empty`.

Remarks

The ID property allows you to uniquely identify this form group instance. Set this value when multiple form groups exist to differentiate between them programmatically, for accessibility, or for custom styling/test automation. Once set, the ID should be unique and persistent.

Examples

<FormGroup ID="personal-info-section" />

LabelText

Gets or sets the label text displayed as a heading for the FormGroup field group.

Declaration

public string LabelText { get; set; }

Property Value

Type	Description
System.String	A `string` specifying the text used for the group label. The default value is `String.Empty`.

Remarks

Specify this property to provide a meaningful title or description for the grouped fields, which improves accessibility and clarifies the section's purpose for users. Use clear, concise labels to maximize usability, especially in forms with multiple groups.

Examples

<FormGroup LabelText="Contact Information" />

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

Dispose(Boolean)

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing

OnInitialized()

Declaration

protected override void OnInitialized()