Kendo UI for Angular Form Appearance
Arranging the form fields inside a form improves the user experience and the Form component provides various options to achieve this. From setting separators to managing the number of controls per row and space between them based on the screen resolution.
The Form component provides flexible field arrangement using the CSS Grid Layout system. You can specify the number of columns, the space between the fields or separating logical inputs, allowing you to create a layout that suits your application's needs.
Form Layout
To define a form where the fields are arranged in a specific number of columns, set the cols property. This property accepts a number that defines in how many columns the entire form should be divided.
In combination with the FormField colSpan property and FormFieldSet cols and colSpan properties, you can rearrange the form controls in many scenarios based on the screen resolution. For more details, refer to the FormField Appearance and FormFieldSet Appearance documentation.
<form kendoForm [formGroup]="form" [cols]="4"></form>The following example demonstrates how to set the number of columns in the Form component.
Setting the Gutters
You can control the space between the form fields using the gutters property of the Form component. The gutters can be fixed or dynamic depending on the screen resolution, allowing you to create a responsive layout that adapts to different devices.
The following example demonstrates the supported gutter configurations in the Form component.
The gutters property can be set in three different ways depending on your needs:
-
To set a fixed gutter size, you can provide a number that represents the size in pixels. This will create a
5pxspace horizontally and vertically between the form fields for all screen sizes.html<form kendoForm [formGroup]="form" [gutters]="5"> ... </form> -
To set a responsive gutter size, depending on the screen resolution, provide a
ResponsiveFormBreakPointarray.html<form kendoForm [formGroup]="form" [gutters]="responsiveGutters"> ... </form> -
You can also take more granular control and set responsive gutter size to rows or columns only. To do so, use the
Guttersinterface. It allows you to specify gutters for rows and columns separately.html<form kendoForm [formGroup]="form" [gutters]="gutters"> ... </form>
Setting Separators
The Form component allows you to visually separate logical groups of inputs by using the FormSeparator component.
The component displays a horizontal line that spans a single column by default providing a clear visual distinction between different sections of the form.
You can also set the colSpan property to span the separator across multiple columns.
<form kendoForm [formGroup]="form" [cols]="4">
<kendo-formfield>...</kendo-formfield>
<kendo-form-separator [colSpan]="4"></kendo-form-separator>
<kendo-formfield>...</kendo-formfield>
</form>The following example demonstrates the separator in action.