DevExtreme v24.2 is now available.

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

Your search did not match any results.

React 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 give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

To create a group item, assign "group" to the itemType property. To specify a group's title, use the caption property. To replace a group's title with custom content, implement a caption template. 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.