DevExtreme v24.1 is now available.

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

Your search did not match any results.

React Field Set

DevExtreme ships with CSS classes that allow you to define the appearance of list-like structures that contain multiple field items -- field sets.

Backend API
import React from 'react'; import TextBox from 'devextreme-react/text-box'; import TextArea from 'devextreme-react/text-area'; const notesLabel = { 'aria-label': 'Notes' }; const addressLabel = { 'aria-label': 'Address' }; const cityLabel = { 'aria-label': 'City' }; const App = () => ( <div className="form"> <div className="dx-fieldset"> <div className="dx-fieldset-header">Simple Field Set</div> <div className="dx-field"> <div className="dx-field-label">Full Name</div> <div className="dx-field-value-static">Kevin Carter</div> </div> <div className="dx-field"> <div className="dx-field-label">Position</div> <div className="dx-field-value-static">Shipping Manager</div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Field Set with DevExtreme Widgets</div> <div className="dx-field"> <div className="dx-field-label">Address</div> <TextBox inputAttr={addressLabel} className="dx-field-value" defaultValue="424 N Main St." /> </div> <div className="dx-field"> <div className="dx-field-label">City</div> <TextBox inputAttr={cityLabel} className="dx-field-value" defaultValue="San Diego" /> </div> </div> <div className="dx-fieldset" id="notes-container"> <div className="dx-fieldset-header">Field Set with Custom Value Width</div> <div className="dx-field"> <div className="dx-field-label">Notes</div> <TextArea className="dx-field-value" inputAttr={notesLabel} height={80} defaultValue="Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months. When not in the office, he is usually on the basketball court playing pick-up games." /> </div> </div> </div> ); export default App;
import React from 'react'; import TextBox from 'devextreme-react/text-box'; import TextArea from 'devextreme-react/text-area'; const notesLabel = { 'aria-label': 'Notes' }; const addressLabel = { 'aria-label': 'Address' }; const cityLabel = { 'aria-label': 'City' }; const App = () => ( <div className="form"> <div className="dx-fieldset"> <div className="dx-fieldset-header">Simple Field Set</div> <div className="dx-field"> <div className="dx-field-label">Full Name</div> <div className="dx-field-value-static">Kevin Carter</div> </div> <div className="dx-field"> <div className="dx-field-label">Position</div> <div className="dx-field-value-static">Shipping Manager</div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Field Set with DevExtreme Widgets</div> <div className="dx-field"> <div className="dx-field-label">Address</div> <TextBox inputAttr={addressLabel} className="dx-field-value" defaultValue="424 N Main St." /> </div> <div className="dx-field"> <div className="dx-field-label">City</div> <TextBox inputAttr={cityLabel} className="dx-field-value" defaultValue="San Diego" /> </div> </div> <div className="dx-fieldset" id="notes-container" > <div className="dx-fieldset-header">Field Set with Custom Value Width</div> <div className="dx-field"> <div className="dx-field-label">Notes</div> <TextArea className="dx-field-value" inputAttr={notesLabel} height={80} defaultValue="Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months. When not in the office, he is usually on the basketball court playing pick-up games." /> </div> </div> </div> ); export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.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@24.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', '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', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins '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.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('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.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <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.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.dx-fieldset:first-child > h4:first-child { margin-top: 0; } #notes-container > .dx-field > .dx-field-label { width: 20%; } #notes-container > .dx-field > .dx-field-value { width: 80%; }

A Simple Field Set

To create a basic field set, use the dx-fieldset CSS class for the main container element. Then, use the dx-fieldset-header class to specify the field set header. The header element can contain plain text, UI components, or custom markup.

Create field set items as separate elements with the dx-field class. The field element can include label and value elements. To define the label element, use the dx-field-label class. The value element uses the dx-field-value-static class and can display plain text or custom markup.

A Field Set with DevExtreme Widgets

You can also use DevExtreme UI components as value elements. Specify the dx-field-value class in the component's HTML markup.

A Field Set with Custom Value Width

To align all field set elements by width, attach a custom id to the element with the dx-fieldset class and apply CSS rules according to the rules in the demo.