37 React Forms (JSONForms)

JSONForms

Forms can be done easily using JSONForms, a declarative framework for efficiently building form-based web UIs.

JSON schema

{
  type: 'object',
  properties: {
    name: {
      type: 'string'
    },
    description: {
      type: 'string'
    },
    done: {
      type: 'boolean'
    },
    rating: {
      type: 'integer'
    }
  },
  required: ['name']
}

UI schema:

{
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      scope: '#/properties/name'
    },
    {
      type: 'Control',
      scope: '#/properties/description',
      options: {
        multi: true
      }
    },
    {
      type: 'Control',
      label: 'Rating',
      scope: '#/properties/rating'
    },
    {
      type: 'Control',
      label: 'Done?',
      scope: '#/properties/done'
    }
  ]
}