Skip to content

docs(Form): Add information about RowSpacing #3103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

docs(Form): Add information about RowSpacing #3103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc4ba34
docs(Form): Add information about RowSpacing
dimodi Jul 15, 2025
0f237bb
Update components/form/formgroups.md
dimodi Jul 15, 2025
4e58b4c
RowSpacing continued
dimodi Jul 16, 2025
4bbf5b1
RowSpacing continued 2
dimodi Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 14 additions & 12 deletions components/form/columns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,29 @@ The Form component for Blazor allows you to add multiple columns by using the `C

>caption Add columns to a Form with Automatically generated fields

You can set the `Columns` parameter when the Form component automatically generates the editors. The form will spread the editors evenly across the columns. It will calculate it using this formula: `propertiesInModelCount / Columns`.
You can set the `Columns` parameter when [`<FormItemsTemplate>`](slug:form-formitems-formitemstemplate) is not used and the Form manages its layout. The Form will spread the editors evenly across the columns.

````RAZOR
@* Add colums to the Form component *@
When using `Columns`, you can also define arbitrary space between the rows with the `RowSpacing` parameter.

<TelerikForm Model="@person"
Columns="2" ColumnSpacing="25px">
````RAZOR
<TelerikForm Model="@Employee"
Columns="2"
ColumnSpacing="24px"
RowSpacing="24px">
</TelerikForm>

@code {
public Person person = new Person();
private Person Employee { get; set; } = new();

public class Person
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20);
public string CompanyName { get; set; }
public DateTime HireDate { get; set; }
public bool IsOnVacation { get; set; } = true;
public string FirstName { get; set; } = string.Empty;
public string LastName { get; set; } = string.Empty;
public DateTime DOB { get; set; } = DateTime.Today.AddYears(-18);
public string CompanyName { get; set; } = string.Empty;
public DateTime HireDate { get; set; } = DateTime.Today;
public bool IsOnVacation { get; set; }
}
}
````
Expand Down
71 changes: 30 additions & 41 deletions components/form/formgroups.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,14 @@ In this article:

The `FormGroup` tag exposes the following parameters:

* `LabelText` - `string` - defines a label for the entire group.
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)

* `Columns` - `int` - defines the number of columns in the group.

* `ColumnSpacing` - `string` - defines the horizontal space between the editors in the group.
| Parameter | Type and Default&nbsp;Value| Description |
| --- | --- | --- |
| `LabelText` | `string` | The label for the entire group rendered as a `<legend>` element in a `<fieldset>`. |
| `Columns` | `int` | The number of columns in the group. |
| `ColumnSpacing` | `string` (`"16px"`) | The horizontal space between the columns in the group. |
| `RowSpacing` | `string` | The vertical space between the fields in the group. The default value is zero, but there is a default top margin for Form items. This parameter has effect only when `Columns` is set. |

## Example - Organize FormItems into Groups

Expand All @@ -36,56 +39,42 @@ You can organize some FormItems into logical groups. You can configure the label
![FormItem example](images/formgroups-example.png)

````RAZOR
@* Organize items into groups *@

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@person" Columns="2" ColumnSpacing="25px">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidation>
<TelerikForm Model="@Employee" Columns="2" ColumnSpacing="24px">
<FormItems>
<FormGroup LabelText="Personal Information" Columns="2" ColumnSpacing="15px">
<FormItem LabelText="First Name" Field="@nameof(Person.FirstName)"></FormItem>
<FormItem LabelText="Last Name" Field="@nameof(Person.LastName)"></FormItem>
<FormItem LabelText="Age" Field="@nameof(Person.Age)" ColSpan="2"></FormItem>
<FormItem LabelText="Email" Field="@nameof(Person.Email)" ColSpan="2"></FormItem>
<FormGroup LabelText="Personal Information" Columns="2" ColumnSpacing="12px" RowSpacing="6px">
<FormItem Field="@nameof(Person.FirstName)" LabelText="First Name" />
<FormItem Field="@nameof(Person.LastName)" LabelText="Last Name" />
<FormItem Field="@nameof(Person.BirthDate)" LabelText="Birth Date" ColSpan="2"></FormItem>
<FormItem Field="@nameof(Person.Email)" ColSpan="2"></FormItem>
</FormGroup>
<FormGroup LabelText="Employee Information">
<FormItem LabelText="Company Name" Field="@nameof(Person.CompanyName)"></FormItem>
<FormItem LabelText="Position" Field="@nameof(Person.Position)"></FormItem>
<FormGroup LabelText="Employee Information" Columns="1" RowSpacing="6px">
<FormItem Field="@nameof(Person.CompanyName)" LabelText="Company Name" />
<FormItem Field="@nameof(Person.Position)" />
<FormItem Field="@nameof(Person.HirehDate)" LabelText="Hire Date" />
</FormGroup>
</FormItems>
</TelerikForm>

@code {
public Person person { get; set; } = new Person();
private Person Employee { get; set; } = new();

public class Person
{
[Required(ErrorMessage = "The First name is required")]
public string FirstName { get; set; }
[Required(ErrorMessage = "The Last name is required")]
public string LastName { get; set; }
[Range(18, 120, ErrorMessage = "The age should be between 18 and 120")]
public int Age { get; set; }
[Required]
[EmailAddress(ErrorMessage = "Enter a valid email")]
public string Email { get; set; }
[Required]
public string CompanyName { get; set; }
[MaxLength(25, ErrorMessage = "The position can be maximum 25 characters long")]
public string Position { get; set; }
public string FirstName { get; set; } = string.Empty;
public string LastName { get; set; } = string.Empty;
public DateTime? BirthDate { get; set; }
public string Email { get; set; } = string.Empty;
public string CompanyName { get; set; } = string.Empty;
public string Position { get; set; } = string.Empty;
public DateTime HirehDate { get; set; } = DateTime.Today;
}
}
````

## See Also

* [Overview](slug:form-overview)
* [FormItems](slug:form-formitems)
* [Template](slug:form-formitems-template)
* [Orientation](slug:form-orientation)
* [Events](slug:form-events)


* [Overview](slug:form-overview)
* [FormItems](slug:form-formitems)
* [Template](slug:form-formitems-template)
* [Orientation](slug:form-orientation)
* [Events](slug:form-events)
13 changes: 7 additions & 6 deletions components/form/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,12 +203,13 @@ You can customize the editors further through the [form items](slug:form-formite

The [Blazor Form](https://demos.telerik.com/blazor-ui/form/overview) exposes multiple parameters that allow you to customize its layout. Besides the parameters below, the Form component also allows you to [define a completely custom layout with HTML markup and Razor components](slug:form-formitems-formitemstemplate).

| Parameter | Type and Default value | Description |
|-----------|------------------------|-------------|
| `ButtonsLayout` | `FormButtonsLayout` enum <br /> (`Start`) | Determines the position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). |
| `Columns` | `int` | Defines the number of columns in the Form. See the [Columns](slug:form-columns) article for more information |
| `ColumnSpacing` | `string` | Defines the amout of horizontal space between the Columns. See the [Columns](slug:form-columns) article for more information. |
| `Orientation` | `FormOrientation` enum <br /> (`Vertical`) | Determines the position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. |
| Parameter | Type and Default&nbsp;value | Description |
| --- | --- | --- |
| `ButtonsLayout` | `FormButtonsLayout` enum <br /> (`Start`) | The position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). |
| `Columns` | `int` | The number of columns in the Form. See the [Columns](slug:form-columns) article for more information |
| `ColumnSpacing` | `string` (`"32px"`) | The amout of horizontal space between the columns. See the [Columns](slug:form-columns) article for more information. |
| `Orientation` | `FormOrientation` enum <br /> (`Vertical`) | The position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. |
| `RowSpacing` | `string` | The amout of vertical space between the rows. The default value is zero, but there is a default top margin for Form items. This parameter has effect only when `Columns` is set. |

### Styling and Appearance

Expand Down