The Form UI component allows you to organize items in tabs. In the context of the Form, tabs are called "tabbed items". A tabbed item can contain simple items, other tabs, groups or empty items. To create a tabbed item, assign "tabbed" to the itemType property. To specify the collection of tabs, use the tabs array. To define items displayed within an individual tab, use its items array.

jQuery

JavaScript

$(function() {
    $("#formContainer").dxForm({
        formData: {
            name: "John Heart",
            position: "CEO",
            hireDate: new Date(2012, 4, 13),
            city: "Los Angeles",
            phone: "+1(213) 555-9392",
            email: "jheart@dx-email.com"
        },
        items: ["name", {
            itemType: "tabbed",
            tabs: [{
                title: "Info",
                items: ["position", "hireDate", "city"]
            }, {
                title: "Contacts",
                items: ["phone", "email"]
            }]
        }]
    });
});

Angular

HTML

TypeScript

<dx-form
    [(formData)]="employee">
    <dxi-item dataField="name"></dxi-item>
    <dxi-item itemType="tabbed">
        <dxi-tab title="Info">
            <dxi-item dataField="position"></dxi-item>
            <dxi-item dataField="hireDate"></dxi-item>
            <dxi-item dataField="city"></dxi-item>
        </dxi-tab>
        <dxi-tab title="Contacts">
            <dxi-item dataField="phone"></dxi-item>
            <dxi-item dataField="email"></dxi-item>
        </dxi-tab>
    </dxi-item>
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        name: "John Heart",
        position: "CEO",
        hireDate: new Date(2012, 4, 13),
        city: "Los Angeles",
        phone: "+1(213) 555-9392",
        email: "jheart@dx-email.com"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxForm :form-data="employee">
        <DxSimpleItem data-field="name" />
        <DxTabbedItem>
            <DxTab title="Info">
                <DxSimpleItem data-field="position" />
                <DxSimpleItem data-field="hireDate" />
                <DxSimpleItem data-field="city" />
            </DxTab>
            <DxTab title="Contacts">
                <DxSimpleItem data-field="phone" />
                <DxSimpleItem data-field="email" />
            </DxTab>
        </DxTabbedItem>
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxSimpleItem, DxTabbedItem, DxTab } from 'devextreme-vue/form';

const employee = {
    name: 'John Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    city: 'Los Angeles',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

export default {
    components: {
        DxForm, DxSimpleItem, DxTabbedItem, DxTab
    },
    data() {
        return {
            employee
        };
    },
};
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, SimpleItem, TabbedItem, Tab } from 'devextreme-react/form';

const employee = {
    name: 'John Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    city: 'Los Angeles',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

class App extends React.Component {
    render() {
        return (
            <Form formData={employee}>
                <SimpleItem dataField="name" />
                <TabbedItem>
                    <Tab title="Info">
                        <SimpleItem dataField="position" />
                        <SimpleItem dataField="hireDate" />
                        <SimpleItem dataField="city" />
                    </Tab>
                    <Tab title="Contacts">
                        <SimpleItem dataField="phone" />
                        <SimpleItem dataField="email" />
                    </Tab>
                </TabbedItem>
            </Form>
        );
    }
}

export default App;

View Demo

Columns within a Tab

The content of a tab can be organized in columns. The colCount property instructs the tab about how many columns it must have. Note that the entire Form layout can also be organized in columns if the colCount property is declared on the root level. In this case, use the colSpan property to define how many general columns the tab must span.

jQuery

JavaScript

$(function() {
    $("#formContainer").dxForm({
        formData: {
            name: "John Heart",
            position: "CEO",
            hireDate: new Date(2012, 4, 13),
            city: "Los Angeles",
            phone: "+1(213) 555-9392",
            email: "jheart@dx-email.com"
        },
        // Splits the Form layout in two columns
        colCount: 2,
        items: ["name", {
            itemType: "tabbed",
            colSpan: 2,
            tabs: [{
                title: "Info",
                // Makes this tab span both general columns
                colSpan: 2,
                // Organizes items inside this tab in three columns
                colCount: 3,
                items: ["position", "hireDate", "city"]
            }, {
                title: "Contacts",
                colCount: 2,
                items: ["phone", "email"]
            }]
        }]
    });
});

Angular

HTML

TypeScript

<dx-form
    [(formData)]="employee"
    [colCount]="2"> <!-- Splits the Form layout in two columns -->
    <dxi-item dataField="name"></dxi-item>
    <dxi-item itemType="tabbed" [colSpan]="2">
        <dxi-tab
            title="Info"
            [colSpan]="2" <!-- Makes this tab span both general columns -->
            [colCount]="3"> <!-- Organizes items inside this tab in three columns -->
                <dxi-item dataField="position"></dxi-item>
                <dxi-item dataField="hireDate"></dxi-item>
                <dxi-item dataField="city"></dxi-item>
        </dxi-tab>
        <dxi-tab
            title="Contacts"
            [colCount]="2">
                <dxi-item dataField="phone"></dxi-item>
                <dxi-item dataField="email"></dxi-item>
        </dxi-tab>
    </dxi-item>
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        name: "John Heart",
        position: "CEO",
        hireDate: new Date(2012, 4, 13),
        city: "Los Angeles",
        phone: "+1(213) 555-9392",
        email: "jheart@dx-email.com"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxForm
        :form-data="employee"
        :col-count="2">
        <DxSimpleItem data-field="name" />
        <DxTabbedItem :col-span="2">
            <DxTab
                title="Info"
                :col-span="2"
                :col-count="3">
                <DxSimpleItem data-field="position" />
                <DxSimpleItem data-field="hireDate" />
                <DxSimpleItem data-field="city" />
            </DxTab>
            <DxTab
                title="Contacts"
                :col-count="2">
                <DxSimpleItem data-field="phone" />
                <DxSimpleItem data-field="email" />
            </DxTab>
        </DxTabbedItem>
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxSimpleItem, DxTabbedItem, DxTab } from 'devextreme-vue/form';

const employee = {
    name: 'John Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    city: 'Los Angeles',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

export default {
    components: {
        DxForm, DxSimpleItem, DxTabbedItem, DxTab
    },
    data() {
        return {
            employee
        };
    },
};
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, SimpleItem, TabbedItem, Tab } from 'devextreme-react/form';

const employee = {
    name: 'John Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    city: 'Los Angeles',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

class App extends React.Component {
    render() {
        return (
            <Form
                formData={employee}
                colCount={2}>
                <SimpleItem dataField="name" />
                <TabbedItem colSpan={2}>
                    <Tab
                        title="Info"
                        colSpan={2}
                        colCount={3}>
                        <SimpleItem dataField="position" />
                        <SimpleItem dataField="hireDate" />
                        <SimpleItem dataField="city" />
                    </Tab>
                    <Tab
                        title="Contacts"
                        colCount={2}>
                        <SimpleItem dataField="phone" />
                        <SimpleItem dataField="email" />
                    </Tab>
                </TabbedItem>
            </Form>
        );
    }
}

export default App;

Custom Content within a Tab

jQuery

The Form UI component allows you to specify custom templates for an individual tab and its content. Assign callback functions to the tabTemplate and template properties, respectively.

JavaScript

$(function() {
    $("#formContainer").dxForm({
        formData: {
            name: "John Heart",
            birthDate: new Date(1964, 3, 15),
            position: "CEO",
            city: "Los Angeles",
            phone: "+1(213) 555-9392",
            email: "jheart@dx-email.com"
        },
        items: ["name", {
            itemType: "tabbed",
            tabs: [{
                title: "Data Protection Policy",
                tabTemplate: function (itemData, itemIndex, itemElement) {
                    itemElement.append("<p style='color: red'>" + itemData.title);
                },
                template: function (itemData, itemIndex, itemElement) {
                    itemElement.append("<p><i>By filling out this form," 
                                        + " you agree to the terms of the" 
                                        + "<a href='#'>Data Protection Policy</a></i></p>");
                }
            }, {
                title: "Info",
                items: ["position", "birthDate", "city"]
            }, {
                title: "Contacts",
                items: [ "phone", "email"]
            }]
        }]
    });
});

Angular

The Form UI component allows you to specify custom templates for an individual tab and its content. Use the dxTemplate component to declare templates.

HTML

TypeScript

<dx-form
    [(formData)]="employee">
    <dxi-item dataField="name"></dxi-item>
    <dxi-item itemType="tabbed" [colSpan]="2">
        <dxi-tab
            title="Data Protection Policy"
            tabTemplate="tab"
            [template]="'tabContent'">
        </dxi-tab>
        <dxi-tab title="Info">
            <dxi-item dataField="position"></dxi-item>
            <dxi-item dataField="birthDate"></dxi-item>
            <dxi-item dataField="city"></dxi-item>
        </dxi-tab>
        <dxi-tab title="Contacts">
            <dxi-item dataField="phone"></dxi-item>
            <dxi-item dataField="email"></dxi-item>
        </dxi-tab>
    </dxi-item>
    <div *dxTemplate="let tabData of 'tab'; let i = index">
        <p style="color:red">{{tabData.title}}</p>
    </div>
    <div *dxTemplate="let data of 'tabContent'">
        <p>
            <i>By filling out this form, you agree
               to the terms of the <a href='#'>Data Protection Policy</a></i>
        </p>
    </div>
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        name: "John Heart",
        birthDate: new Date(1964, 3, 15),
        position: "CEO",
        city: "Los Angeles",
        phone: "+1(213) 555-9392",
        email: "jheart@dx-email.com"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Vue

The Form UI component allows you to specify custom templates for an individual tab and its content. Assign callback functions to the tabTemplate and template properties, respectively.

App.vue

<template>
    <DxForm :form-data="employee">
        <template #tab="{ data }">
            <p style="color:red">{{ data.title }}</p>
        </template>
        <template #tabContent="{ data }">
            <p>
                <i>By filling out this form, you agree
                to the terms of the <a href='#'>Data Protection Policy</a></i>
            </p>
        </template>
        <DxSimpleItem data-field="name" />
        <DxTabbedItem :col-span="2">
            <DxTab
                title="Data Protection Policy"
                tab-template="tab"
                template="tabContent" />
            <DxTab title="Info">
                <DxSimpleItem data-field="position" />
                <DxSimpleItem data-field="birthDate" />
                <DxSimpleItem data-field="city" />
            </DxTab>
            <DxTab title="Contacts">
                <DxSimpleItem data-field="phone" />
                <DxSimpleItem data-field="email" />
            </DxTab>
        </DxTabbedItem>
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxSimpleItem, DxTabbedItem, DxTab } from 'devextreme-vue/form';

const employee = {
    name: 'John Heart',
    birthDate: new Date(1964, 3, 15),
    position: 'CEO',
    city: 'Los Angeles',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

export default {
    components: {
        DxForm, DxSimpleItem, DxTabbedItem, DxTab
    },
    data() {
        return {
            employee
        };
    },
};
</script>

React

The Form UI component allows you to specify custom templates for an individual tab and its content. Assign callback functions to the tabRender and render properties, respectively.

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, SimpleItem, TabbedItem, Tab } from 'devextreme-react/form';

const employee = {
    name: 'John Heart',
    birthDate: new Date(1964, 3, 15),
    position: 'CEO',
    city: 'Los Angeles',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

class App extends React.Component {
    render() {
        return (
            <Form formData={employee}>
                <SimpleItem dataField="name" />
                <TabbedItem colSpan={2}>
                    <Tab
                        title="Data Protection Policy"
                        tabRender={tabRender}
                        render={tabContentRender} />
                    <Tab title="Info">
                        <SimpleItem dataField="position" />
                        <SimpleItem dataField="birthDate" />
                        <SimpleItem dataField="city" />
                    </Tab>
                    <Tab title="Contacts">
                        <SimpleItem dataField="phone" />
                        <SimpleItem dataField="email" />
                    </Tab>
                </TabbedItem>
            </Form>
        );
    }
}

function tabRender(data) {
    return (
        <p style={{color:'red'}}>{ data.title }</p>
    );
}

function tabContentRender(data) {
    return (
        <p>
            <i>By filling out this form, you agree
            to the terms of the <a href='#'>Data Protection Policy</a></i>
        </p>
    );
}    

export default App;

Configure the Tab Panel

For displaying tabs, the Form uses the TabPanel UI component. Therefore, you can specify any properties of the TabPanel in the tabPanelOptions object.

jQuery

JavaScript

$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            // ...
        },
        items: ["firstName", "lastName", {
            itemType: "tabbed",
            tabPanelOptions: {
                height: 250,
                onTitleClick: function (e) {
                    // ...
                }
            },
            tabs: [ ... ]
        }]
    });
});

Angular

HTML

TypeScript

<dx-form
    [(formData)]="employee">
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item itemType="tabbed">
        <dxo-tab-panel-options [height]="250" [onTitleClick]="tabPanel_tabTitleClick">
        </dxo-tab-panel-options>
    </dxi-item>
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        // ...
    }
    tabPanel_tabTitleClick (e) {
        // ...
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxForm :form-data="employee">
        <DxSimpleItem data-field="firstName" />
        <DxSimpleItem data-field="lastName" />
        <DxTabbedItem>
            <DxTabPanelOptions
                :height="250"
                :on-title-click="tabPanelTitleClick" />
            <DxTab title="Info">
                <DxSimpleItem data-field="hireDate" />
                <DxSimpleItem data-field="city" />
            </DxTab>
            <DxTab title="Contacts">
                <DxSimpleItem data-field="phone" />
                <DxSimpleItem data-field="email" />
            </DxTab>
        </DxTabbedItem>
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxSimpleItem, DxTabbedItem, DxTab, DxTabPanelOptions } from 'devextreme-vue/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    hireDate: new Date(2012, 4, 13),
    city: 'Los Angeles',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

export default {
    components: {
        DxForm, DxSimpleItem, DxTabbedItem, DxTab, DxTabPanelOptions
    },
    data() {
        return {
            employee
        };
    },
    methods: {
        tabPanelTitleClick(e) {
            // ...
        }
    }
};
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, SimpleItem, TabbedItem, Tab, TabPanelOptions } from 'devextreme-react/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    hireDate: new Date(2012, 4, 13),
    city: 'Los Angeles',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

class App extends React.Component {
    constructor() {
        super();
        this.tabPanelTitleClick = this.tabPanelTitleClick.bind(this);
    }

    render() {
        return (
            <Form formData={employee}>
                <SimpleItem dataField="firstName" />
                <SimpleItem dataField="lastName" />
                <TabbedItem>
                    <TabPanelOptions
                        height="250"
                        onTitleClick={this.tabPanelTitleClick} />
                    <Tab title="Info">
                        <SimpleItem dataField="hireDate" />
                        <SimpleItem dataField="city" />
                    </Tab>
                    <Tab title="Contacts">
                        <SimpleItem dataField="phone" />
                        <SimpleItem dataField="email" />
                    </Tab>
                </TabbedItem>
            </Form>
        );
    }

    tabPanelTitleClick(e) {
        // ...
    }
}

export default App;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery Form - In Tabs

Create a Tab

jQuery

Angular

Vue

React

Columns within a Tab

jQuery

Angular

Vue

React

Custom Content within a Tab

jQuery

Angular

Vue

React

See Also

Configure the Tab Panel

jQuery

Angular

Vue

React

See Also