# Responsive Form

The Form component in ASP.NET MVC provides responsive layouts using a flexible grid structure. The responsive layout automatically adapts to various screen sizes, ensuring optimal usability of the Form across desktop, tablet, and mobile devices.

To enable responsive behavior, set the `Layout()` option to `"grid"` and configure the desired breakpoints through the `Cols()` configuration.

You can control the width and arrangement of form items and groups based on screen width by using the `ColSpan()` method, which dynamically adjusts the layout as the viewport changes.

## Breakpoint Configuration

Define responsive breakpoints through the `Cols()` configuration inside the `Grid()` method. Each breakpoint includes a `MinWidth`, `MaxWidth`, and a `value` that represents the number of columns in the grid.

```Razor HtmlHelper
.Grid(g => g.Cols(c =>
{
    c.Add().MaxWidth(500).Value(3);
    c.Add().MinWidth(501).MaxWidth(768).Value(6);
    c.Add().MinWidth(769).Value(12);
}))
```

By default, three breakpoints define the Form columns as follows:

|                | **Small**   | **Medium**     | **Large**  |
| -------------- | ----------- | -------------- | ---------- |
| **Dimensions** | up to 500px | 501px to 768px | over 768px |
| **Columns**    | 3           | 6              | 12         |

The following example shows hot to set a fixed ColSpan for a field.

```Razor HtmlHelper
i.Add().Field(f => f.Email)
    .Label("Email")
    .ColSpan(3)
    .Editor(e => e.TextBox());
```

## ColSpan on Groups

You can apply `ColSpan()` option to Form [groups](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/layout/form/groups) to define their width in the parent layout.

```Razor HtmlHelper
items.AddGroup()
    .Label("Shipping Address")
    .Layout("grid")
    .ColSpan(6)
    .Items(i =>
    {
        i.Add().Field(f => f.Country)
            .Label("Country")
            .ColSpan(3);
        i.Add().Field(f => f.City)
            .Label("City")
            .ColSpan(3);
    });
```

The example below demonstrates a responsive Form with multiple groups.

```Razor HtmlHelper

@(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.ResponsiveFormViewModel>()
    .Name("responsiveForm")
    .HtmlAttributes(new { method = "POST" })
    .Layout("grid")
    .ClearButton(false)
    .Grid(g => g.Cols(c =>
    {
        c.Add().MaxWidth(500).Value(3);
        c.Add().MinWidth(501).MaxWidth(768).Value(6);
        c.Add().MinWidth(769).Value(12);
    }))
    .Validatable(v =>
    {
        v.ValidateOnBlur(true);
        v.ValidationSummary(vs => vs.Enable(false));
    })
    .Items(items =>
    {
        items.AddGroup()
            .Label("Personal Info")
            .Layout("grid")
            .ColSpan(6)
            .Items(i =>
            {
                i.Add().Field(f => f.FullName)
                    .Label("Full name")
                    .ColSpan(3)
                    .Editor(e => e.TextBox());

                i.Add().Field(f => f.Email)
                    .Label("Email")
                    .ColSpan(3)
                    .Editor(e => e.TextBox());
            });

        items.AddGroup()
            .Label("Address")
            .Layout("grid")
            .ColSpan(6)
            .Items(i =>
            {
                i.Add().Field(f => f.Country)
                    .Label("Country")
                    .ColSpan(3)
                    .Editor(e => e.ComboBox()
                        .Placeholder("EU Country")
                        .BindTo(new[] { "France", "Germany", "Italy", "Spain", "Bulgaria" }));

                i.Add().Field(f => f.City)
                    .Label("City")
                    .ColSpan(3)
                    .Editor(e => e.TextBox());
            });
    }))
```

## Best Practices

When implementing column spanning in the forms, consider the following recommendations:

* Start Mobile-First—Define responsive breakpoints starting from the smallest screen size and working up to larger viewports.
* Balance ColSpans—Ensure that all items in a row do not exceed the total grid column width.
* Use Groups—Group related fields to provide logical structure and improve UX.
* Adjust for Content—Give more space to fields like addresses or longer inputs.
* Test Across Devices—Verify that the responsive columns appear as expected across different screen sizes and orientations.

## See Also

* [Creating Responsive Form for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/form/responsive-form)
* [Server-Side API of the Form](https://www.telerik.com/aspnet-mvc/documentation/api/form)