A React library for rendering out forms based on the Form.io platform.

This module is based on the original react-formio and add extra features listed above.

See our storybook to see all available components and installation guide.

Features

Many components are provided to build your own backoffice based on Formio.js API:

• ActionsTable,
• FormAccess,
• FormAction,
• Form,
• FormBuilder,
• FormEdit,
• FormsTable,
• InputTags,
• InputText,
• Pagination,
• Select,
• SubmissionsTable.
• Table,
• Predefined Reducers for Actions, Action, Form, Forms, Submission, Submissions, etc...,
• TypeScript support.
• Tailwind support.

Migrate to v2

If you use redux actions from v1, you have to install @tsed/redux-formio-stores and remplace your imports:

- import { defaultFormioReducer, formsReducer } from "@tsed/react-formio";
+ import { defaultFormioReducer, formsReducer } from "@tsed/react-formio-stores";

Migrate to v3

See docs/migrations/v2-to-v3.md for the full guide. Highlights:

• ESM only – the package now exports ESM bundles exclusively. Update any require() calls and ensure your bundler/test runner supports native ESM.
• Tree-shaken imports – import components from their atomic folder (e.g. @tsed/react-formio/organisms/form/Form). Use import "@tsed/react-formio/all" once if you still need global side-effects/registrations.
• Tailwind 3 baseline – install @tsed/tailwind-formio@^3 and upgrade to Tailwind ≥3.3; legacy Tailwind v2 tokens were removed.
• Store packages removed – uninstall @tsed/react-formio-stores, @tsed/redux-utils, and @tsed/react-formio-container. Use the provided hooks (useForm, useFormBuilder, useFormioContext) or your own state management.
• New peer dependencies – install the updated UI stack:

  yarn add @formio/choices.js @tanstack/react-table react-select react-table use-debounce

• Tables – if you rely on the Table component or UseTableProps, review the Table & useTable specifics section for the TanStack-specific migration notes.

Example import diff:

- import { Form } from "@tsed/react-formio";
+ import { Form } from "@tsed/react-formio/organisms/form/Form";

Install

@tsed/react-formio can be used on the server, or bundled for the client using an npm-compatible packaging system such as Browserify or webpack.

npm install @formio/js @tsed/react-formio react-table --save

Usage

import React from "react";
import { FormBuilder } from "@tsed/react-formio";

function App() {
  return (
    <div className='App'>
      <FormBuilder display={"form"} components={[]} />
    </div>
  );
}

export default App;

See more on http://formio.tsed.dev/?path=/docs/getting-started--docs

Contributors

Please read contributing guidelines here.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

The MIT License (MIT)

Copyright (c) 2016 - 2021 Romain Lenzotti

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.