New to Kendo UI for Angular? Start a free 30-day trial

FormFieldSet Appearance

The FormFieldSet component provides a flexible and customizable way to arrange the inside FormField components and the FormFieldSet itself according to the wrapper Form component.

The FormFieldSet, as well as the Form component, provides flexibility in arranging form fields relying on the CSS Grid Layout system. You can specify the number of columns, how many columns each fieldset should span, and the gaps between them allowing you to create a layout that suits your application's needs.

Form Layout
Setting the Gutters

Form Layout

To define a fieldset where the fields are arranged in a specific number of columns, set the cols and colSpan properties of the FormFieldSet component. The cols property defines how many columns the fieldset should have, while the colSpan property defines how many columns from the wrapper Form the FormFieldSet should span.

The following example demonstrates the cols and colSpan properties in action.

Change Theme

Theme

Loading ...

The cols property accepts:

a number that defines how many columns the fieldset should have. For example, if you want to create a fieldset with two columns, you can set cols to 2.

an array of ResponsiveFormBreakPoint objects that define how many columns the fieldset should have for different screen sizes.

html
<form kendoForm [formGroup]="form" [cols]="4">
    <fieldset kendoFormFieldSet [cols]="spannedColumns"></fieldset>
</form>
typescript
// Fieldset that has 2 columns for screens between 200px and 400px.
public spannedColumns: ResponsiveFormBreakPoint [] = [
    { minWidth: 0, maxWidth: 200, value: 1},
    { minWidth: 201, maxWidth: 400, value: 2}
    ];

You can also control how many columns from the wrapper Form the FormFieldSet should span using the colSpan property. This property accepts:

a number that defines how many columns the fieldset should span. For example, if you want to create a fieldset that spans two columns from the Form, you can set colSpan to 2.

an array of ResponsiveFormBreakPoint objects that define how many columns the fieldset should span for different screen sizes.

html
<form kendoForm [formGroup]="form" [cols]="4">
    <fieldset kendoFormFieldSet [colSpan]="spannedColumns"></fieldset>
</form>
typescript
// Fieldset that spans 2 columns for screens between 200px and 400px.
public spannedColumns: ResponsiveFormBreakPoint[] = [
    { minWidth: 0, maxWidth: 200, value: 1}
    { minWidth: 201, maxWidth: 400, value: 2}
    ];

Setting the Gutters

Similarly to the gutters property of the Form component, the FormFieldSet component also provides a gutters property that allows you to control the space between the form fields inside the fieldset only. This is particularly useful when you want to create a consistent layout within a specific section of the form, while still maintaining the overall responsiveness of the form.

The following example demonstrates how to set the gutters in the FormFieldSet component.

Change Theme

Theme

Loading ...

The property can 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 5px space between the form fields inside the fieldset.
html
```
<fieldset kendoFormFieldSet [gutters]="5"></fieldset>
```

To set a responsive gutter size, depending on the screen resolution, you can provide ResponsiveFormBreakPoint array.

html
<fieldset kendoFormFieldSet [gutters]="responsiveGutters"></fieldset>
typescript
public responsiveGutters: ResponsiveFormBreakPoint[] = [
    { minWidth: 0, maxWidth: 400, value: 1 },
    { minWidth: 401, maxWidth: 600, value: 2 },
    { minWidth: 601, maxWidth: 900, value: 3},
];

You can also take more granular control and set a responsive gutter size to rows or columns only. To do so, use the Gutters interface. It allows you to specify gutters for rows and columns separately.

html
<fieldset kendoFormFieldSet legend="Personal Information" [gutters]="gutters"></fieldset>
typescript
public gutters: Gutters = {
    rows: [
        { minWidth: 0, maxWidth: 400, value: 1 },
        { minWidth: 401, maxWidth: 600, value: 2 },
        { minWidth: 601, maxWidth: 900, value: 3 },
    ],
    cols: [
        { minWidth: 0, maxWidth: 400, value: 1 },
        { minWidth: 401, maxWidth: 600, value: 10 },
        { minWidth: 601, maxWidth: 900, value: 20 },
    ],
};

FormFieldSet Appearance

Form Layout

Setting the Gutters

Suggested Links