React JSONSchema Form

An integration of https://github.com/rjsf-team/react-jsonschema-form into Drupal's Form and Field APIs.

For additional documentation on this module read the docs at https://rjsf.ctrladel.io/

Form API Usage

$form['rjsf_element'] = [
  '#type' => 'rjsf_editor',
  '#server_validation' => TRUE,
  '#live_validation' => TRUE,
  '#schema' => [
    'title' => 'A registration form',
    'description' => 'A simple form example.',
    'type' => 'object',
    'required' => ['firstName', 'lastName'],
    'properties' => [
      'firstName' => [
        'type' => 'string',
        'title' => 'First name',
        'default' => 'Chuck',
      ],
      'lastName' => [
        'type' => 'string',
        'title' => 'Last name',
      ],
      'telephone' => [
        'type' => 'string',
        'title' => 'Telephone',
        'minLength' => 10,
      ],
    ],
  ],
  '#uiSchema' => [
    'firstName' => [
      'ui:autofocus' => TRUE,
      'ui:emptyValue' => '',
      'ui:autocomplete' => 'family-name',
    ],
    'lastName' => [
      'ui:emptyValue' => '',
      'ui:autocomplete' => 'given-name',
    ],
    'age' => [
      'ui:widget' => 'updown',
      'ui:title' => 'Age of person',
      'ui:description' => '(earthian year)',
    ],
    'bio' => [
      'ui:widget' => 'textarea',
    ],
    'password' => [
      'ui:widget' => 'password',
      'ui:help' => 'Hint: Make it strong!',
    ],
    'date' => [
      'ui:widget' => 'alt-datetime',
    ],
    'telephone' => [
      'ui:options' => [
        'inputType' => 'tel',
      ],
    ],
  ],
];

Field API Usage

When using RJSF on an entity the schema and uiSchema json can be pasted directly into the field settings which is then passed to RJSF when the entities form is rendered.

Install instructions

The easiest way to ensure the editor and widgets are available is to use asset-packagist and require the @drupal-rjsf/editor npm package for this module as a composer dependency. To set up your project to use asset-packagist see here. Then run `composer require npm-asset/drupal-rjsf--edtior`

For more details instructions see https://rjsf.ctrladel.io/installation