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

• Calendar.
• Checkbox.
• DatePicker.
• TimePicker.
• TagPicker.
• Dropdown is a component based on InputPicker.
• Input is a component based on Input and InputGroup.
• Number format is a component based on NumericFormat.
• Pattern format is a component based on PatternFormat.
• Radio group is a component based on RadioGroup.
• Search is a component based on InputPicker.
• Text area is a component based on Input.
• Uploader is a component based on Uploader.
• Rich text editor. This component is in a separate package.

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.
• QR code. This component is in a separate package.

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.