# @sierralabs/forms-ui

> Sierra Labs Forms React UI Library

Latest version **1.1.61** (published 2026-09-25) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @sierralabs/forms-ui
pnpm add @sierralabs/forms-ui
yarn add @sierralabs/forms-ui
bun add @sierralabs/forms-ui
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.1.61 |
| Published | 2026-09-25 |
| First published | 2021-02-12 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12.14.0 |
| Dependencies | 1 |
| Unpacked size | 634.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sierra Labs |
| Maintainers | kchu_sierra |

## Links

- npm: https://www.npmjs.com/package/@sierralabs/forms-ui
- npm.io page: https://npm.io/package/@sierralabs/forms-ui

## Dependencies (1)

- [react-virtuoso](https://npm.io/package/react-virtuoso.md) ^1.5.13

## Recent versions

- 1.1.61 (latest) — 2026-09-25
- 1.1.60 — 2026-06-30
- 1.3.27 — 2026-05-07
- 1.3.26 — 2026-04-21
- 1.2.37 — 2026-03-11
- 1.1.59 — 2026-03-11
- 1.3.25 — 2026-01-08
- 1.3.24 — 2025-12-01
- 1.1.58 — 2025-12-01
- 1.2.35 — 2025-10-31
- 1.1.57 — 2025-10-04
- 1.2.34 — 2025-10-03
- 1.1.56 — 2025-09-16
- 1.1.55 — 2025-09-10
- 1.1.54 — 2025-08-20
- … 153 more at https://npm.io/package/@sierralabs/forms-ui/versions

## README

# Sierra Labs Forms UI

Sierra Labs Forms React UI Library for managing form schemas, form templates, and form data capture.

## Getting Started

Install the `@sierralabs/forms-ui` package along with peer dependencies

```bash
# for npm
$ npm install @sierralabs/core @sierralabs/forms-core @sierralabs/track-changes @sierralabs/state-machine @sierralabs/react-material-ui @sierralabs/react-material-ui-formik @sierralabs/forms-ui

# or for yarn
$ yarn add @sierralabs/core @sierralabs/forms-core @sierralabs/track-changes @sierralabs/state-machine @sierralabs/react-material-ui @sierralabs/react-material-ui-formik @sierralabs/forms-ui

# forms-ui is also dependent on react, material-ui, date-fns, js-cookie, styled-components, formik, yup, use-query-arams, react-router-dom, react-number-format, @tinymce/tinymce-react, react-beautiful-dnd

$ yarn add @material-ui/core @material-ui/icons @material-ui/lab @material-ui/pickers @tinymce/tinymce-react date-fns formik js-cookie react-beautiful-dnd react-number-format react-router-dom styled-components use-query-params yup # or npm install

```

### Form Schema and Template Editors

Add the following Routes to your project for the form schema and form template editors. These components integrate with the `@sierralabs/forms-api` provided endpoints.

```jsx
<Switch>
  <Route
    exact
    path='/portal/admin/form-templates'
    component={FormTemplateListPage}
  />
  <Route
    path='/portal/admin/form-templates/:formTemplateId'
    component={FormTemplateDetailPage}
  />
</Switch>
```

### Form Component

You can integrate the `Form` component into your project and build custom logic around handling of form data captured through the UI.

```typescript
const CustomForm: React.FC = () => {
  // Pass in the form Entity Schema JSON definiition
  const entitySchema = {...};
  // Pass in the form template JSON definition
  const formStateNode = {...};
  return (
    <FormProvider
      entitySchema={entitySchema}
      formStateNode={formStateNode}
      onChange={values => {
        /* when form data is entered `values` contains the user data */
      }}
    >
      // Render the form UI
      <Form />
    </FormProvider>
  )
};
```

> TODO: Document Form component configurations (i.e. appendSectionControls, etc.)

### Form Hooks

The following are Form related hooks to interface with the `@sierralabs/forms-api`:

- `useFindFormSchemas` - Get a list of form schemas
- `useFindFormSchemaDeltas` - Get history of form schema changes
- `useApplyFormSchemaDelta` - Apply a change to the form schema
- `useCreateFormTemplate`- Create a form template
- `useUpdateFormTemplate` - Update a form template
- `useUpdateFormTemplateConfig` - Updating a Form Template config
- `usePublishFormTemplate` - Publish a form template version
- `useFindFormTemplates` - Get a list of form templates
- `useFindFormTemplate` - Get a single form template and its config
- `useGetFormTemplateVersions` - Get all published versions for a form template

## Development & Contributing

For fast development leveraging React's fast refresh capabilities you can develop using the `forms-ui-example` project located in the "examples" folder.

```bash
# Start the @sierralabs/forms-ui in watch mode
forms-ui $ yarn start

# Start the forms example project
forms-ui-example $ yarn start

# Now all changes in @sierralabs/forms-ui will get automatically compiled and leverage React's fast browser refresh capabilities.
```

## Development from an outside project

To develop and contribute to the `@sierralabs/forms-ui` project from another project that has a dependency on this module you can use [Yalc](https://github.com/wclr/yalc). Yalc works better then yarn/npm link due to node_module dependency issues with symlinking that impact modules like react.

```bash
# Install yalc if you don't already have it installed
$ npm install -g yalc

# Publish `@sierralabs/forms-ui` into your local yalc repo
$ yalc publish

# On the project that is using `@sierralabs/forms-api` run
dependent-project $ yalc link @sierralabs/forms-api

# Now back on the `@sierralabs/forms-ui` folder you can make code changes and push changes to the linked projects by
$ yalc push

# Lastly, to undo the yalc link reference, you'll need to force the package install on the dependent project
dependent-project $ yarn install --force
```

---
_Source: https://npm.io/package/@sierralabs/forms-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._