# Kendo UI for Angular Form Layout

The Form component provides comprehensive layout control to create professional, user-friendly forms. You can arrange form fields using a flexible grid system, control spacing, choose label orientations, and organize content with groupings and separators.

The Form component's capabilities transform basic single-column forms into sophisticated, responsive interfaces that adapt to your content and users' needs. Whether you need a compact registration form, a multi-section data entry screen, or a mobile-friendly survey, the Form component's layout features allow you to achieve a polished, consistent look and feel.

## Column-Based Layouts

The column system uses CSS Grid and involves two key properties working together:

* `cols`—Sets the number of columns in a container. Applicable to Form and FormFieldSet components.
* `colSpan`—Controls how many columns an element spans. Applicable to FormField or FormFieldSet components.

The following example demonstrates the column system with Form, FormFieldSet, and FormField components working together.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/form/layout/cols/source.txt)

The column system works hierarchically as follows:

1. [`Form`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formcomponent) Level—The Form's [`cols`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formcomponent#cols) property defines the main grid structure.
2. [`FormFieldSet`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formfieldsetcomponent) Level—Can define its own [`cols`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formfieldsetcomponent#cols) (internal columns) and [`colSpan`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formfieldsetcomponent#colspan) (how many Form columns it spans).
3. [`FormField`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formfieldcomponent) Level—Uses [`colSpan`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formfieldcomponent#colspan) to span across columns within its container.

All column-related properties (`cols` and `colSpan`) support responsive behavior that adapts to different screen sizes. For detailed information on creating responsive layouts, see the [Form Adaptiveness](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/form/adaptive) documentation.

## Orientation

The Form component provides an option for changing the layout orientation of the form components.

To render the form content horizontally or vertically, set the [`orientation`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formcomponent#orientation) property of the Form component.

```html
<form kendoForm [formGroup]="formGroup" orientation="horizontal"> ... </form>
```

By default, the orientation is set to `vertical`, which displays the form fields and their labels one below the other. For a more compact layout, set the `orientation` to `horizontal`, which displays the form fields and their labels side by side.

The following example demonstrates the orientation types of the Form component.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/form/orientation/source.txt)

## Setting the Gutters

You can control the space between the form fields using the [`gutters`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formcomponent#gutters) property of the Form and [gutters](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formfieldsetcomponent#gutters) property of the FormFieldSet component. This allows you to define different or equal gaps between form controls, enhancing the overall layout and readability of the form.

The gutters can be set to any of the following options:

* Fixed pixels—Set a fixed gutter size by providing a number that represents the size in pixels.
* Responsive pixels—Allow you to set gutters that adapt to different screen sizes. See the [Form Adaptiveness](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/form/adaptive) documentation.

The following example demonstrates the supported gutter configurations in the Form component.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/form/layout/gutters/source.txt)

## Groups and Separators

Grouping form controls in a meaningful way creates a cleaner and more concise form content. To achieve this, you can use:

* [`FormFieldSet`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formfieldsetcomponent) component—Provides a way to group related form fields together. Setting the `legend` property allows you to provide a title for the group, making it easier for users to understand the purpose of the grouped fields.
* [`FormSeparator`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formseparatorcomponent) component—Displays a horizontal line that provides a clear visual distinction between different sections of the form. You can also set the [`colSpan`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formseparatorcomponent#colspan) property to span the separator across the necessary columns.

The following example demonstrates the separator in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/form/layout/separators/source.txt)

## Suggested Links

* [API Reference of the Form](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formcomponent)
* [API Reference of the FormField](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formfieldcomponent)
* [API Reference of the FormFieldSet](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/formfieldsetcomponent)
* [Getting Started with the Kendo UI for Angular Inputs](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/installation/getting-started)