This article presents a simple way how to build a complex React form using components from multiple React design systems (Material, Semantic, Blueprint, ...)
- show/hide conditional fields (fields that depends on values of different inputs)
- (async) validation
- complex wizard forms (branching, predicting steps in the nav)
- form management based on React Final Form
- many components provided by the library: select, wizard, checkbox, radio, ... in multiple design systems
All these feature are used by writing a simple JSON schema like this:
The described open source library https://github.com/data-driven-forms/react-forms allows to:
- show/hide conditional fields (fields that depends on values of different inputs) - (async) validation - complex wizard forms (branching, predicting steps in the nav) - form management based on React Final Form - many components provided by the library: select, wizard, checkbox, radio, ... in multiple design systems
All these feature are used by writing a simple JSON schema like this:
const schema = { fields: [{ component: componentTypes.TEXT_FIELD, name: 'name', label: 'Your name', isRequired: true, validate: [{ type: validatorTypes.REQUIRED }] }, { component: componentTypes.TEXT_FIELD, name: 'email', label: 'Email', isRequired: true, validate: [ { type: validatorTypes.REQUIRED }, { type: validatorTypes.PATTERN, pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$', message: 'Not valid email' } ] },{ component: componentTypes.TEXT_FIELD, name: 'confirm-email', label: 'Confirm email', type: 'email', isRequired: true, validate: [{ type: 'same-email' }] },{ component: componentTypes.CHECKBOX, name: 'newsletters', label: 'I want to receive newsletter' }] }
You can check a live demo on stackblitz:https://stackblitz.com/edit/wttpqn