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.
The column system works hierarchically as follows:
FormLevel—The Form'scolsproperty defines the main grid structure.FormFieldSetLevel—Can define its owncols(internal columns) andcolSpan(how many Form columns it spans).FormFieldLevel—UsescolSpanto 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 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 property of the Form component.
<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.
Setting the Gutters
You can control the space between the form fields using the gutters property of the Form and 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 documentation.
The following example demonstrates the supported gutter configurations in the Form component.
Groups and Separators
Grouping form controls in a meaningful way creates a cleaner and more concise form content. To achieve this, you can use:
FormFieldSetcomponent—Provides a way to group related form fields together. Setting thelegendproperty allows you to provide a title for the group, making it easier for users to understand the purpose of the grouped fields.FormSeparatorcomponent—Displays a horizontal line that provides a clear visual distinction between different sections of the form. You can also set thecolSpanproperty to span the separator across the necessary columns.
The following example demonstrates the separator in action.