FormField Appearance

The FormField component provides a flexible and customizable way to arrange form field controls inside a form.

Use the colSpan property to control how many columns a form field should span within the Form or FormFieldSet. This allows you to create complex layouts that adapt to different screen sizes and resolutions.

The colSpan property accepts:

• a number that defines how many columns the form field should span. For example, if you want to create a field that spans two columns from the Form or FormFieldSet, you can set colSpan to 2.
  html

  <!-- Divide the form into 6 columns -->
  <form kendoForm [formGroup]="form" cols="6">
       <!-- Span across 2 columns of the form. -->
      <kendo-formfield [colSpan]="2"> ... </kendo-formfield>
      <kendo-formfield [colSpan]="2"> ... </kendo-formfield>
  </form>

• an array of ResponsiveFormBreakPoint objects that define how many columns the form field should span for different screen sizes.
  html

  <form kendoForm [formGroup]="form" cols="6">
    <kendo-formfield [colSpan]="spannedColumns"> ... </kendo-formfield>
    <kendo-formfield [colSpan]="spannedColumns"> ... </kendo-formfield>
  </form>

  typescript

  public spannedColumns: ResponsiveFormBreakPoint[] = [
      { minWidth: 0, maxWidth: 200, value: 6 },
      { minWidth: 201, maxWidth: 600, value: 4 },
      { minWidth: 601, maxWidth: 1000, value: 2 }
  ];

The following example demonstrates how to set the colSpan property in the FormField component. Use the Splitter to resize the form and see how the form fields spans across the columns on different screen sizes.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Form
• API Reference of the FormField
• API Reference of the FormFieldSet
• Getting Started with the Kendo UI for Angular Inputs