Skip to content

taniarascia/react-advanced-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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} />

About

An example of a schema-based form system for React.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages