DevExtreme v23.1 is now available.

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

Free Trial Buy
    Your search did not match any results.
    Form

    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    $(() => { $('#form').dxForm({ formData: employees, colCount: 2, items: [{ itemType: 'group', caption: 'System Information', items: ['ID', 'FirstName', 'LastName', 'HireDate', 'Position', 'OfficeNo'], }, { itemType: 'group', caption: 'Personal Data', items: ['BirthDate', { itemType: 'group', caption: 'Home Address', items: ['Address', 'City', 'State', 'Zipcode'], }], }, { itemType: 'group', caption: 'Contact Information', items: [{ itemType: 'tabbed', tabPanelOptions: { deferRendering: false, }, tabs: [{ title: 'Phone', items: ['Phone'], }, { title: 'Skype', items: ['Skype'], }, { title: 'Email', items: ['Email'], }], }], }], }); });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <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/23.1.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></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 class="long-title"><h3>Personal details</h3></div> <div id="form-container"> <div id="form"></div> </div> </div> </body> </html>
    #form-container { margin: 10px; } .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }
    const employees = { 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', };