Skip to main content

Components library

Components based on the React Suite package are available in the package @react-form-builder/components-rsuite.

To install the components, run the following command:

npm install @react-form-builder/components-rsuite
tip

If your package manager does not support automatic installation of peer dependencies, for example you use the --legacy-peer-deps flag in npm, then you need to install peer dependencies manually.

npm install @emotion/css@11.10.5 @emotion/react@11.10.5 @emotion/styled@11.10.5 @rsuite/icons@1.0.2 react-number-format@5.1.4 rsuite@5.59.1 --save-exact

You can see an example of connecting components to FormBuilder in this section of the documentation. An example of connecting components to FormViewer in this section of the documentation.

An example of connecting components to FormBuilder can be seen in this section of the documentation. An example of connecting components to FormViewer can be found in this section of the documentation.

The components are divided into the following categories:

  • Fields - components that store form data.
  • Static - components for displaying information, do not contain form data.
  • Structure - components that structure other components.
  • Templates - template-related components, such as the Slot component.

Fields components​

Static components​

  • Button.
  • Error message - a component that displays a form validation error.
  • Header is a component that displays HTML headers (h1-h6).
  • Image is a component that displays an image.
  • Label is a component that displays the HTML tag label.
  • Menu is a component that displays menus, based on Nav.
  • Message.
  • Progress circle.
  • Progress line.
  • Static content - displays the text in the HTML span tag.
  • Tooltip - displays a tooltip using Whisper and Tooltip.

Structure components​

  • Breadcrumb displays the current path on the page using Breadcrumb.
  • Card - displays a title card using Panel.
  • Container displays the HTML div tag.
  • Tab displays a tabbed component based on Nav.

Template components​

  • Slot is a component used to display the components of the parent form in the child form.