DevExtreme v23.1 is now available.

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

Your search did not match any results.
Forms and Multi-Purpose


DevExtreme Vue Form is a UI component for data editing that provides a customizable layout for arranging editors in columns, groups, and tabs. Best suitable editors are chosen automatically depending on the data type. You can use Vue syntax and techniques to instantiate and configure the Form or handle its events. In addition, the component supports prop validation and templates that use named slots. Find out more about DevExtreme Vue components.

Backend API
Copy to CodeSandBox
<template> <DxForm :form-data="formData"> <template #avatar-template="{}"> <div class="form-avatar"/> </template> <DxGroupItem :col-count="4" css-class="first-group" > <DxSimpleItem template="avatar-template"/> <DxGroupItem :col-span="3"> <DxSimpleItem data-field="FirstName"/> <DxSimpleItem data-field="LastName"/> <DxSimpleItem :editor-options="birthDateOptions" data-field="BirthDate" editor-type="dxDateBox" /> </DxGroupItem> </DxGroupItem> <DxGroupItem :col-count="2" css-class="second-group" > <DxGroupItem> <DxSimpleItem data-field="Address"/> <DxSimpleItem data-field="City"/> <DxSimpleItem :editor-options="positionOptions" data-field="Position" editor-type="dxSelectBox" /> </DxGroupItem> <DxGroupItem> <DxSimpleItem :editor-options="stateOptions" data-field="State" editor-type="dxSelectBox" /> <DxSimpleItem data-field="ZipCode"/> <DxSimpleItem :editor-options="phoneOptions" data-field="Mobile" > <DxLabel text="Phone"/> </DxSimpleItem> </DxGroupItem> <DxSimpleItem :col-span="2" :editor-options="notesOptions" data-field="Notes" editor-type="dxTextArea" /> </DxGroupItem> </DxForm> </template> <script> import { DxForm, DxSimpleItem, DxGroupItem, DxLabel, } from 'devextreme-vue/form'; import { DxTextArea } from 'devextreme-vue/text-area'; import { employee, positions, states } from './data.js'; export default { components: { DxForm, DxTextArea, DxGroupItem, DxSimpleItem, DxLabel, }, data() { return { formData: employee, birthDateOptions: { width: '100%' }, positionOptions: { items: positions, value: '', }, stateOptions: { items: states, }, phoneOptions: { mask: '+1 (000) 000-0000' }, notesOptions: { height: 140 }, }; }, }; </script> <style> .first-group, .second-group { padding: 20px; } .second-group { background-color: rgba(191, 191, 191, 0.15); } .form-avatar { height: 128px; width: 128px; margin-right: 10px; border: 1px solid #d2d3d5; border-radius: 50%; background-image: url("../../../../images/petersmith.png"); background-size: contain; background-repeat: no-repeat; background-position: center; } </style>
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="" /> <script src=""></script> <script src=""></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
export const employee = { ID: 1, FirstName: 'John', LastName: 'Heart', Position: 'CEO', BirthDate: '1964/03/16', HireDate: '1995/01/15', Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.', Address: '351 S Hill St.', City: 'Los Angeles', State: 'CA', ZipCode: '90013', Home: '555-684-1334', Mobile: '555-684-1335', Email: '', Skype: 'jheart_DX_skype', }; export const positions = [ 'HR Manager', 'IT Manager', 'Controller', 'CEO', 'Sales Manager', 'Support Manager', 'Shipping Manager', ]; export const states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];
window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../../', 'npm:': '', }, 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.1.5/cjs', 'devextreme-vue': 'npm:devextreme-vue@23.1.5', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.1/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.48/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', '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.11/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);