Skip to content
Worked example using rolling-fields to demonstrate use in building dynamic form.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
package-lock.json
package.json
yarn.lock

README.md

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:

initial form

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

updated form

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.

You can’t perform that action at this time.