DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Grouped Fields

You can organize Form items in groups and tabs. To do this, declare Group and Tabbed items in the items[] array. Each group and tab can have their own layout and contain other item types.

To create a group item, assign "group" to the itemType property. To specify a group's title, use the caption property. This demo shows three groups. The Personal Data group is nested in the System Information group.

To create a tabbed item, assign "tabbed" to the itemType property. This demo shows a tabbed item nested in the Contact Information group. The Form uses the TabPanel component to display tabs. You can specify the TabPanel's properties in the tabPanelOptions object. This demo disables the deferRendering property to render TabPanel's content immediately.

Backend API
<template> <div> <div class="long-title"><h3>Personal details</h3></div> <div id="form-container"> <DxForm id="form" :col-count="2" :form-data="employee" > <DxGroupItem caption="System Information" > <DxSimpleItem data-field="ID" /> <DxGroupItem caption="Main Information" > <DxSimpleItem data-field="FirstName" /> <DxSimpleItem data-field="LastName" /> <DxSimpleItem data-field="HireDate" /> <DxSimpleItem data-field="Position" /> <DxSimpleItem data-field="OfficeNo" /> </DxGroupItem> </DxGroupItem> <DxGroupItem caption="Personal Data" > <DxSimpleItem data-field="BirthDate" /> <DxGroupItem caption="Home Address" > <DxSimpleItem data-field="Address" /> <DxSimpleItem data-field="City" /> <DxSimpleItem data-field="State" /> <DxSimpleItem data-field="Zipcode" /> </DxGroupItem> </DxGroupItem> <DxGroupItem caption="Contact Information" > <DxTabbedItem> <DxTabPanelOptions :defer-rendering="false" /> <DxTab title="Phone" > <DxSimpleItem data-field="Phone" /> </DxTab> <DxTab title="Skype" > <DxSimpleItem data-field="Skype" /> </DxTab> <DxTab title="Email" > <DxSimpleItem data-field="Email" /> </DxTab> </DxTabbedItem> </DxGroupItem> </DxForm> </div> </div> </template> <script setup lang="ts"> import { DxForm, DxSimpleItem, DxGroupItem, DxTabbedItem, DxTabPanelOptions, DxTab, } from 'devextreme-vue/form'; import service from './data.ts'; import 'devextreme-vue/text-area'; const employee = service.getEmployee(); </script> <style scoped> #form-container { margin: 10px; } .long-title h3 { font-size: 24px; text-align: center; line-height: 2em; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.3.4/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.2.5/cjs', 'devextreme-vue': 'npm:devextreme-vue@23.2.5/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.12/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
const employee = { ID: 1, FirstName: 'John', LastName: 'Heart', CompanyName: 'Super Mart of the West', Position: 'CEO', OfficeNo: '901', BirthDate: new Date(1964, 2, 16), HireDate: new Date(1995, 0, 15), Address: '351 S Hill St.', City: 'Los Angeles', State: 'CA', Zipcode: '90013', Phone: '+1(213) 555-9392', Email: 'jheart@dx-email.com', Skype: 'jheart_DX_skype', }; export default { getEmployee() { return employee; }, };
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> <script src="https://unpkg.com/typescript@4.2.4/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>