This article describes configuration options of a group form item.

Type: Object

A group form item is a section consisting of a caption and child form items. You can customize the layout options for each group separately.

View Demo

See Also


Specifies whether or not all group item labels are aligned.

Type: Boolean
Default Value: true


Specifies the group caption.

Type: String
Default Value: undefined


The count of columns in the group layout.

Type: Number
Default Value: 1

For extra small screens, this option always equals 1 to make the widget adaptive. Specify the colCountByScreen option to override this logic.

$(function() {
        // ...
        items: [{
            itemType: "group",
            items: [ ... ],
            colCountByScreen: {
                xs: 2
        // ...
<dx-form ... >
        [items]="[ ... ]">
        <dxo-col-count-by-screen [xs]="2"></dxo-col-count-by-screen>
import { DxFormModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
    imports: [
        // ...
    // ...


Specifies dependency between the screen factor and the count of columns in the group layout.

Type: Object
Default Value: undefined


Specifies the number of columns spanned by the item.

Type: Number
Default Value: undefined


Specifies a CSS class to be applied to the form item.

Type: String
Default Value: undefined

In Form, you can customize the appearance of form items using CSS styles. To apply a style to an item, implement a CSS class, which may contain various properties, and assign the name of this class to the cssClass option of the item.


Holds an array of form items displayed within the group.

Type: Array
Default Value: undefined

Like the items option of the Form widget, the array passed to the items field of a group item can hold items of the following types.

  • Simple
    A standard item consisting of a label and an editor widget used to specify a value of the associated data field.

  • Group
    An item representing a container of other form items.

  • Tabbed
    An item representing a tabbed container of other form items.

  • Empty
    An empty item used to add a space between neighboring items.


Specifies the type of the current item.

Type: String
Default Value: 'simple'
Accepted Values: 'simple' | 'group' | 'tabbed' | 'empty'

The structure of the form item object depends on the value of this option.

This article describes the structure of an item whose type is "group". The following item types are also available.

  • simple
    Simple item is an editor-label pair usually bound to a formData object field used to display and modify this field.

  • tabbed
    Tabbed item is a tabbed panel whose tabs contain child form items. You can customize the layout options for each tab separately.

  • empty
    Empty item is an empty span between neighboring items. You can specify the number of columns spanned by an empty item.


A template to be used for rendering a group item.

Type: template
Function parameters:
data: Object

An object providing access to the field data, form instance and the configuration object of the editor.

itemElement: Object

An HTML element of the group item to be rendered.

Return Value: String|DOM Node|jQuery

A template name or a template container.

Use the template option of a group item to display custom content under a group caption, for instance an image. To specify a custom template for items contained in a group, define the template option of each of these items.

Form With Image

To define a custom template used to render group items, assign the required template name or template container to each simple item's template option.

A binding context of an item template is an object containing the following fields. So, you can bind template elements to these fields directly. To access another binding context within an item template, use Knockout/AngularJS binding variables.

  • component
    An instance of the current Form widget.

  • dataField
    A formData object field bound to the form item being rendered.

  • editorOptions
    Configuration object of the current form item editor.

See Also


Specifies whether or not the current form item is visible.

Type: Boolean
Default Value: true


Specifies the sequence number of the item in a form, group or tab.

Type: Number
Default Value: undefined

Items whose visible indexes are not specified are located at the end of the sequence and are ordered alphabetically.