Modules

Modules

Modules were introduced in formio.js v4.5.0. You need a version later than that to utilize modules. The Form.io Renderer allows for a number of modules, which allows for external libraries the ability to alter the behavior of this library. The following modules can be provided.

• Templates: Allows for you to introduce new templates and CSS frameworks (such as Bootstrap, Semantic, etc)
• Components: Allows for Custom Components to be introduced into the renderer.
• Framework: Allows for the CSS framework to be forced when loaded.
• Providers: Allows for custom storage providers for file components (coming soon).
• Fetch: Provides a way to intercept all API requests made into the Form.io renderer.

Available Modules

Bootstrap 3 (Automatically included in 4.x but external for 5.x)

• https://github.com/formio/bootstrap3
• @formio/bootstrap3

Semantic UI (Automatically included in 4.x but external for 5.x)

• https://github.com/formio/semantic
• @formio/semantic

Bulma

• https://github.com/formio/bulma
• @formio/bulma

Gov.uk Design System

• https://github.com/DigitalPatterns/formio-gds-template
• @digitalpatterns/formio-gds-template

United States Web Design System

• Enterprise plans only

Contrib components

• Coming soon

Premium components

• Enterprise plans only

If you have developed an additional module and would like it listed here, please contact [email protected] and let us know.

Creating a module

New modules can be created by including an external Library within your application that has exports the following structure.

export default {
  framework: 'semantic', // Sets the default template to a specific framework.
  components: {
    /* List of custom components */
  },
  templates: {
    semantic: {
      /* List of templates found @ https://github.com/formio/formio.js/blob/master/src/templates/bootstrap/index.js */
    }
  },
  fetch: {
    fetchname: CustomFetchPluginClass
  }
}

Register a module

To register the module into the renderer, you must use the use method, whereas you will pass the Module definition into this method.

Example

import MyModule from './MyModule';
import { Formio } from 'formiojs';
Formio.use(MyModule);

Existing Modules

• Semantic UI Template: https://github.com/formio/semantic
• Bulma Template: https://github.com/formio/bulma