# @gpa-gemstone/react-forms

> React Form modules for gpa webapps

Latest version **1.1.128** (published 2026-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gpa-gemstone/react-forms
pnpm add @gpa-gemstone/react-forms
yarn add @gpa-gemstone/react-forms
bun add @gpa-gemstone/react-forms
```

## Health

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

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

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.1.128 |
| Published | 2026-09-09 |
| First published | 2020-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 237.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | GridProtectionAlliance |
| Maintainers | scwills, ritchiecarroll, clackner-gpa, elwills, gsfbuildbot, pcrawford1 |
| Keywords | React, Table, GSF, Gemstone, GridProtectionAlliance |

## Links

- npm: https://www.npmjs.com/package/@gpa-gemstone/react-forms
- Repository: https://github.com/GridProtectionAlliance/gpa-gemstone
- Homepage: https://github.com/GridProtectionAlliance/gpa-gemstone#readme
- Issues: https://github.com/GridProtectionAlliance/gpa-gemstone/issues
- npm.io page: https://npm.io/package/@gpa-gemstone/react-forms

## Dependencies (8)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [moment](https://npm.io/package/moment.md) 2.29.4
- [react-color](https://npm.io/package/react-color.md) ^2.19.3
- [react-portal](https://npm.io/package/react-portal.md) 4.2.2
- [styled-components](https://npm.io/package/styled-components.md) 5.3.3
- [@gpa-gemstone/gpa-symbols](https://npm.io/package/@gpa-gemstone/gpa-symbols.md) 0.0.65
- [@gpa-gemstone/helper-functions](https://npm.io/package/@gpa-gemstone/helper-functions.md) 0.0.62
- [@gpa-gemstone/application-typings](https://npm.io/package/@gpa-gemstone/application-typings.md) 0.0.99

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.1.128 (latest) — 2026-09-09
- 1.1.127 — 2026-08-10
- 1.1.126 — 2026-07-28
- 1.1.125 — 2026-07-13
- 1.1.124 — 2026-06-17
- 1.1.123 — 2026-05-06
- 1.1.122 — 2026-04-24
- 1.1.121 — 2026-04-23
- 1.1.120 — 2026-04-14
- 1.1.119 — 2026-04-03
- 1.1.118 — 2026-03-27
- 1.1.117 — 2026-03-26
- 1.1.116 — 2026-03-21
- 1.1.115 — 2026-03-11
- 1.1.114 — 2026-02-26
- … 116 more at https://npm.io/package/@gpa-gemstone/react-forms/versions

## README

# react-forms

![gemstone logo](https://raw.githubusercontent.com/gemstone/web/master/docs/img/gemstone-wide-600.png)

The Gemstone Web Library organizes all Gemstone functionality related to web.

[![GitHub license](https://img.shields.io/github/license/gemstone/web?color=4CC61E)](https://github.com/gemstone/web/blob/master/LICENSE)

This library includes helpful npm package for creating strongly typed form components in react.

* Input
* CheckBox
* TextArea
* DatePicker
* Select
* EnumCheckBoxes
* DateRangePicker
* ArrayCheckBoxes
* ArrayMultiSelect
* MultiCheckBoxSelect
* DoubleInput

## Usage

```ts
    interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string, EnumField: number, FromField: string, ToField: string}
    let record:iType = {Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021', FromField: '01/01/2020', ToField: '01/01/2021'}
    let options = [{Value: 1, Label: 'first'}, {Value:2, Label: 'second'}]

    <Input<iType> Record={record} Field="Field1" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
    <CheckBox<iType> Record={record} Field="Field3" Setter={(event) => record.Field3 = event.target.value}}>
    <Select<iType> Record={record} Field="Field2" Setter={(event) => record.Field3 = event.target.value}} Options={options}>
    <TextArea<iType> Record={record} Field="Field4" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
    <DatePicker<iType> Record={record} Field="Field5" Setter={(event) => record.Field1 = event.target.value}>
    <DateRangePicker<iType> Record={record} FromField="FromField" ToField="ToField" Label="Date Range" Setter={(event) => record.Field1 = event.target.value}>
    <EnumCheckBoxes<iType> Record={record} Field="EnumField" Setter={(event) => record.Field3 = event.target.value}} Enum={['Monday', 'Tuesday','Wednesday']}>
	<DoubleInput<iType> Record={record} Field1="Field4" Field1="Field5" Setter={(r) => record = r} Valid={(field) => /*some criteria*/}>
```

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