This project provides a tiny demo of how you can build a dynamic form using rolling-fields. To find out more about the benefits of using rolling-fields, check out this Rolling Your Own Dynamic Forms blog post.

These screenshots give the basic idea. The initial form looks like:

but the form changes dynamically based on selection to show different options:

For simplicity, the demo form field schemas is hard-coded in fieldSchemas.js.

In a practial application for a larger form, you would probably want to read these in from a file or data store.

Getting Started

Clone this project and install npm i

You can run locally using:

npm start

This should opens http://localhost:3000 in your browser.

Running Tests

If you'd like to run unit tests then use:

npm t

Acknowledgements

This project was bootstrapped with Create React App and uses a custom hook for form input based on hooks-form. It would not be possible without rolling-fields from Tes.