DOCSEARCHbyAlgolia
Submit Docs

FormEngine Documentation

website·Indexed 33 days ago

https://formengine.io/documentation/

A form building framework featuring integration with Angular via @bubblydoo/angular-react and a suite of React components including Material UI (@react-form-builder/components-material-ui), Google Maps, and WASM-based components like QR code generators.

Tokens
718.2K
Snippets
3.8K
Records
5.6K
Agent score
54%

What's inside FormEngine

  1. Overview of Mantine YearPicker components

    The YearPicker components allow users to select years and are based on the Mantine YearPicker. They require the @mantine/dates package and are distributed via @react-form-builder/components-mantine.

    There are three available variants:

    • MtYearPicker: For selecting a single specific year (e.g., a fiscal year). Value shape: Date | null.
    • MtYearRangePicker: For selecting a continuous span of years (start and end year). Value shape: [Date, Date] | null.
    • MtYearMultiplePicker: For selecting an arbitrary set of non-contiguous years. Value shape: Date[].

  2. Overview of YearPickerInput components

    The YearPickerInput components provide a combination of a text input and a year picker popover. They are part of the @react-form-builder/components-mantine package and require @mantine/dates.
    npm install @react-form-builder/components-mantine @mantine/dates

  3. Overview of FormEngine Core

    FormEngine Core (@react-form-builder/core) is an open-source tool for creating functional React forms using JSON configurations. It separates form logic (state, validation, and flow) from rendering, allowing it to work with any component library, including Material UI, Chakra UI, Ant Design, or custom design systems. Key benefits include reduced boilerplate, built-in validation, and the ability to update forms without redeploying code.

  4. Overview of the Dropdown component

    The Dropdown component, provided by the @react-form-builder/components-rsuite package, is based on the RSuite Input Picker. It is used to create a list of predefined choices (e.g., countries or categories) from which a user can select a single option.

  5. Overview of FormEngine Designer

    FormEngine Designer is a visual, drag-and-drop form builder for React applications. It allows form authors to design forms in a browser-based UI (adding fields, layout, validation, and actions) while developers embed the designer and viewer packages into their applications to connect storage, APIs, and custom components. Key features include a drag-and-drop canvas, preview mode with live data validation, support for multiple component libraries (Material UI, RSuite, Mantine), and JSON export/import capabilities.

  6. Overview of Mantine DatePicker components

    The DatePicker suite provides three variants for date selection, all included in the @react-form-builder/components-mantine package and based on the Mantine DatePicker library. Each variant handles different value shapes depending on the selection requirement.

  7. Overview of FormBuilder validation types

    FormBuilder provides two primary types of validation. All validators are executed as asynchronous functions. Field validators are executed first, followed by form validators.

    1. Field validation: Validates a single form field.
    2. Form validation: Validates the entire form state.

  8. Overview of the Uploader component

    The Uploader component provides a Material Design styled interface for file uploads, including an upload button, file list display, and status feedback. It is implemented as a preset that combines multiple Material UI components into a single robust upload experience.
    npm install @react-form-builder/components-material-ui

  9. Overview of ChipGroup components

    The ChipGroup components provide a way to render a set of chips for selection. They are available in the @react-form-builder/components-mantine NPM package and are based on the Mantine Chip.Group. There are two primary variants:

    1. MtChipRadioGroup: Used for single-selection. The value is a single string. Ideal for picking one option from a list.
    2. MtChipCheckboxGroup: Used for multiple-selection. The value is an array of strings (string[]). Ideal for filters and tags.

  10. Overview of rSuiteComponents namespace

    The rSuiteComponents namespace in the @react-form-builder/designer-bundle provides a comprehensive set of UI components and utilities based on rSuite for building form designers. It includes a wide array of input controls (e.g., rsInput, rsDatePicker, rsCheckbox), layout components (e.g., rsContainer, rsCard, rsModal), and specialized wrappers for localization, theming, and view management.

  11. Overview of MonthPickerInput components

    The MonthPickerInput components provide a text field combined with a month picker popover. They are based on Mantine MonthPicker and require the @mantine/dates package. They are available via the @react-form-builder/components-mantine NPM package.

    There are three available variants:

    • MtMonthPickerInput: For selecting a single month. Value shape: Date | null.
    • MtMonthRangePickerInput: For selecting a start and end month range. Value shape: [Date, Date] | null.
    • MtMonthMultiplePickerInput: For selecting multiple individual months. Value shape: Date[].

  12. Overview of the Radio Group component

    The Radio Group component (from @react-form-builder/components-rsuite, based on RSuite's RadioGroup) allows users to select exactly one option from a list of choices. It is used when multiple options are available but only a single selection is permitted.