React Advanced Form
An example of a schema-based form system in React. Define your schema, and pass it into the form. Supports basic conditional schema.
Example
The schema system support text input, checkbox, radio group, select, textarea, and conditonal fields. It is presented in these examples with plain HTML and CSS based forms, but can easily be modified for use with any React UI framework, such as Material UI, Semantic UI, etc.
const formSchema = [
{ name: 'name', label: 'Name', componentType: 'text', required: true },
{ name: 'playable', label: 'Playable', componentType: 'checkbox' },
{
name: 'race',
label: 'Race',
componentType: 'radioGroup',
options: [
{ label: 'Human', value: 'human' },
{ label: 'Dwarf', value: 'dwarf' },
{ label: 'Elf', value: 'elf' },
],
},
{
name: 'class',
label: 'Class',
componentType: 'select',
options: [
{ label: 'Ranger', value: 'ranger' },
{ label: 'Wizard', value: 'wizard' },
{ label: 'Healer', value: 'healer' },
],
},
{
name: 'spell',
label: 'Spell',
componentType: 'select',
options: [
{ label: 'Fire', value: 'fire' },
{ label: 'Ice', value: 'ice' },
],
condition: { key: 'class', value: 'wizard', operator: '=' },
},
{
name: 'description',
label: 'Description',
componentType: 'textarea',
},
]
Simply pass the schema into the component, and handle the submit event.
<AdvancedForm schema={formSchema} onSubmit={handleSubmit} />
12.6k Jan 3, 2023
37 Nov 22, 2022
2 Jun 30, 2022
3 Nov 30, 2022
503 Dec 25, 2022
9.8k Dec 22, 2022
25 Nov 28, 2022
69 Dec 27, 2022
6 Jun 5, 2022