React Form - Overview

The JavaScript 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.

The source code for the React version of this demo will be available soon.

$(() => { const form = $('#form').dxForm({ labelMode: 'floating', formData: companies[0], readOnly: false, showColonAfterLabel: true, labelLocation: 'left', minColWidth: 300, colCount: 2, }).dxForm('instance'); const companySelectorSelectBox = $('#select-company').dxSelectBox({ displayExpr: 'Name', dataSource: companies, inputAttr: { 'aria-label': 'Company' }, labelMode: 'floating', label: 'Select company', value: companies[0], onValueChanged(data) { form.option('formData', data.value); }, }).dxSelectBox('instance'); const companySelectorText = $('#select-company-text'); $('#label-mode').dxSelectBox({ items: ['outside', 'static', 'floating', 'hidden'], value: 'floating', inputAttr: { 'aria-label': 'Label Mode' }, onValueChanged(data) { form.option('labelMode', data.value); if (data.value === 'outside') { companySelectorSelectBox.option('labelMode', 'hidden'); companySelectorText.show(); } else { companySelectorSelectBox.option('labelMode', data.value); companySelectorText.hide(); } }, }); $('#label-location').dxSelectBox({ items: ['left', 'top'], value: 'left', inputAttr: { 'aria-label': 'Label Location' }, onValueChanged(data) { form.option('labelLocation', data.value); }, }); $('#columns-count').dxSelectBox({ items: ['auto', 1, 2, 3], inputAttr: { 'aria-label': 'Column Count' }, value: 2, onValueChanged(data) { form.option('colCount', data.value); }, }); $('#min-column-width').dxSelectBox({ items: [150, 200, 300], inputAttr: { 'aria-label': 'Min Column Width' }, value: 300, onValueChanged(data) { form.option('minColWidth', data.value); }, }); $('#width').dxNumberBox({ value: undefined, max: 550, inputAttr: { 'aria-label': 'Width' }, onValueChanged(data) { form.option('width', data.value); }, }); $('#read-only').dxCheckBox({ text: 'readOnly', value: false, onValueChanged(data) { form.option('readOnly', data.value); }, }); $('#show-colon').dxCheckBox({ text: 'showColonAfterLabel', value: true, onValueChanged(data) { form.option('showColonAfterLabel', data.value); }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.2.3/css/dx.light.css" /> <script src="js/dx.all.js?v=25.2.3"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="form-demo"> <div class="widget-container"> <div id="select-company-text">Select company:</div> <div id="select-company"></div> <div id="form"></div> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Label mode:</span> <div id="label-mode"></div> </div> <div class="option"> <span>Label location:</span> <div id="label-location"></div> </div> <div class="option"> <span>Columns count:</span> <div id="columns-count"></div> </div> <div class="option"> <span>Min column width:</span> <div id="min-column-width"></div> </div> <div class="option"> <span>Form width:</span> <div id="width"></div> </div> <div class="option"> <div id="read-only"></div> </div> <div class="option"> <div id="show-colon"></div> </div> </div> </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 JavaScript Form component's width.
readOnly
Makes the JavaScript Form editors read-only.
showColonAfterLabel
Specifies whether the JavaScript Form displays a colon after a label.

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