Vue Form - Overview

The Form component builds a data entry UI for an object assigned to the formData property. The component displays and aligns label-editor pairs for each field in the bound object.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the Form features used.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <div id="form-demo"> <div class="widget-container"> <div v-if="labelMode === 'outside'">Select company:</div> <DxSelectBox :data-source="companies" :label-mode="companySelectorLabelMode" :input-attr="{ 'aria-label': 'Company' }" label="Select company" v-model:value="companyName" display-expr="Name" value-expr="Name" /> <DxForm id="form" :form-data="company" :label-mode="labelMode" :read-only="readOnly" :show-colon-after-label="showColon" :label-location="labelLocation" :min-col-width="minColWidth" :col-count="colCount" :width="width" /> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Label mode:</span> <DxSelectBox :items="labelModes" :input-attr="{ 'aria-label': 'Label Mode' }" v-model:value="labelMode" /> </div> <div class="option"> <span>Label location:</span> <DxSelectBox :items="labelLocations" :input-attr="{ 'aria-label': 'Label Location' }" v-model:value="labelLocation" /> </div> <div class="option"> <span>Columns count:</span> <DxSelectBox :items="columnsCounts" :input-attr="{ 'aria-label': 'Column Count' }" v-model:value="colCount" /> </div> <div class="option"> <span>Min column width:</span> <DxSelectBox :items="minColumnWidths" :input-attr="{ 'aria-label': 'Min Column Width' }" v-model:value="minColWidth" /> </div> <div class="option"> <span>Form width:</span> <DxNumberBox :max="550" v-model:value="width" :input-attr="{ 'aria-label': 'Form Width' }" /> </div> <div class="option"> <DxCheckBox v-model:value="readOnly" text="readOnly" /> </div> <div class="option"> <DxCheckBox v-model:value="showColon" text="showColonAfterLabel" /> </div> </div> </div> </template> <script setup lang="ts"> import { computed, ref } from 'vue'; import DxCheckBox from 'devextreme-vue/check-box'; import DxSelectBox from 'devextreme-vue/select-box'; import DxNumberBox from 'devextreme-vue/number-box'; import DxForm from 'devextreme-vue/form'; import service from './data.ts'; const labelModes = ['outside', 'static', 'floating', 'hidden']; const labelLocations = ['left', 'top']; const columnsCounts = ['auto', 1, 2, 3]; const minColumnWidths = [150, 200, 300]; const companies = service.getCompanies(); const labelMode = ref('floating'); const labelLocation = ref('left'); const readOnly = ref(false); const showColon = ref(true); const minColWidth = ref(300); const colCount = ref(2); const companyName = ref(companies[0].Name); const width = ref(null); const company = computed(() => companies.find(({ Name }) => Name === companyName.value)); const companySelectorLabelMode = computed(() => { if (labelMode.value === 'outside') { return 'hidden'; } return labelMode.value; }); </script> <style scoped> .widget-container { margin-right: 320px; padding: 20px; max-width: 550px; min-width: 300px; } #form { margin-top: 25px; } .options { padding: 20px; position: absolute; bottom: 0; right: 0; width: 260px; top: 0; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } </style>

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/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.9.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/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>

You can use the editors on the right to modify the following properties:

labelMode: "outside" | "static" | "floating" | "hidden"
Specifies label display mode.
labelLocation: "top" | "left" | "right"
Specifies whether to place outer labels above, to the left, or to the right of corresponding editors. The latter location is not demonstrated in this example.
colCount
Specifies the number of columns in the layout. To build an adaptive layout where the column count depends on the container width, set this property's value to "auto".
minColWidth
Specifies the minimum column width. Use this property when the colCount property's value is "auto".
width
Specifies the Form component's width.
readOnly
Makes the Form editors read-only.
showColonAfterLabel
Specifies whether the Form displays a colon after a label.

To get started with the DevExtreme Form component, refer to the following tutorial for step-by-step instructions: Getting Started with Form.