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 - Customize Fields at Runtime

The Form component allows you to add/remove items and specify item visibility at runtime. The Form only updates the affected items and does not re-render the entire form.

In this demo, the "Show Address" checkbox specifies the visibility of address-related fields. Review the component's code to see how to set the "HomeAddress" group's visible attribute.

Click the "Add phone" button to add a new phone editor. This action adds a new item to the items array of the "phones" group. Each phone editor contains a button that deletes it from the items array and the Form.

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