# @cordelta/react-forms-material

> Beautiful, ultra simple, stateless, validated forms for use in React function components

Latest version **0.0.12** (published 2021-06-04) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @cordelta/react-forms-material
pnpm add @cordelta/react-forms-material
yarn add @cordelta/react-forms-material
bun add @cordelta/react-forms-material
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2021-06-04 |
| First published | 2019-10-11 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 19.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | danderson00 |
| Maintainers | seanwuapps, danderson00 |
| Keywords | react, stateless, form, function, component, material, ui |

## Links

- npm: https://www.npmjs.com/package/@cordelta/react-forms-material
- Repository: https://github.com/cordeltadigital/react-forms-material
- Homepage: https://github.com/cordeltadigital/react-forms-material#readme
- Issues: https://github.com/cordeltadigital/react-forms-material/issues
- npm.io page: https://npm.io/package/@cordelta/react-forms-material

## Dependencies (2)

- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.9.10
- [@cordelta/react-forms](https://npm.io/package/@cordelta/react-forms.md) ^0.0.12

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.12 (latest) — 2021-06-04
- 0.0.11 — 2021-06-04
- 0.0.10 — 2021-06-04
- 0.0.9 — 2020-09-05
- 0.0.8 — 2020-09-05
- 0.0.7 — 2020-09-05
- 0.0.6 — 2020-09-05
- 0.0.5 — 2020-03-02
- 0.0.4 — 2020-02-25
- 0.0.3 — 2020-02-17
- 0.0.2 — 2019-10-12
- 0.0.1 — 2019-10-11

## README

# @cordelta/react-forms-material

Beautiful, ultra simple, stateless, validated forms for use in React function components.

A demo is available at [https://cordeltadigital.github.io/react-forms-material/](https://cordeltadigital.github.io/react-forms-material/).

## Installation

```shell
yarn add @cordelta/react-forms-material
```

## Usage

```jsx
import React from 'react'
import { Form, Text, Select, Radio, Checkbox, Submit } from '@cordelta/react-forms-material'

export default ({ onSubmit, initialValues }) => (
  <Form onSubmit={onSubmit} values={initialValues}>
    <Text name="name" label="Name" required minLength="5" maxLength="50" />
    <Text name="description" label="Description" multiline maxLength="100" />
    <Select name="type" label="Type" values={['', 'Widget', 'Component']} required />
    <Radio name="rating" label="Rating" values={[1, 2, 3]} row />
    <Checkbox name="urgent" label="Urgent" />

    <Submit>Submit</Submit>
  </Form>
)
```

## Core Components

### `Form`

All input components must be contained within a `Form` component.

#### Props

Name|Type|Description
---|---|---
values|object|Object containing initial values for form elements
onSubmit|function(values)|A callback to be executed when the corresponding `Submit` component is clicked

All other props are passed on to the underlying `form` element.

### `Submit`

Renders a Material UI [`Button` component](https://material-ui.com/api/button/) that triggers the closest `Form` 
component's `onSubmit` callback.

#### Props

All props are passed on to the underlying `Button` component.

### `Button`

A pass through of the Material UI [`Button` component](https://material-ui.com/api/button/) for convenience.

## Field Components

Field components are constructed by wrapping a Material UI [`InputLabel` component](https://material-ui.com/api/input-label/), 
a form component and [`FormHelperText` component](https://material-ui.com/api/form-helper-text/) within a 
[`FormControl` component](https://material-ui.com/api/form-control/), similar to a 
[`TextField` component](https://material-ui.com/api/text-field/).

All field components can be passed the following props:

Name|Type|Description
---|---|---
name|string|Specifies the name of the property to populate with the field value (required)
label|string|Text on the field's label
value|any|Initial value for the field. The DOM API will generally cast this to a string
helperText|string|Specifies the helper text for the field

The following props are passed to the parent [`FormControl` component](https://material-ui.com/api/form-control/):

Name|Type|Description
---|---|---
className|string|Class name to apply to the component
fullWidth|boolean|Specifies that the field should occupy the full width of its parent
variant|string|Corresponds to the `variant` [prop](https://material-ui.com/api/form-control/#props) of a `FormControl`. One of `standard`, `outlined` or `filled`
margin|string|Corresponds to the `margin` [prop](https://material-ui.com/api/form-control/#props) of a `FormControl`. One of `none`, `dense` or `normal`. Most fields, except `Text` default to `normal`

All other props are passed to the input component, as described below.
 
### `Text`

Renders a field component with a Material UI [`Input` component](https://material-ui.com/api/input/) as the input 
component.

### `Select`

Renders a field component with a Material UI [`Select` component](https://material-ui.com/api/select/) as the input 
component. Options are specified using the props below and are rendered as 
[`MenuItem` components](https://material-ui.com/api/menu-item/).

#### Props

Name|Type|Description
---|---|---
values|array(any)|Specifies the values to use for each option. The DOM API casts these to strings
labels|array(string)|Specifies the labels to use for each corresponding option in the `values` array. If not specified, entries from the `values` array are used.

### `Radio`

Renders a field component with a Material UI [`RadioGroup` component](https://material-ui.com/api/radio-group/) as the 
input component. Options are specified using the props below and are rendered as `RadioButton` components, described
in the next section. 

#### Props

Name|Type|Description
---|---|---
values|array(any)|Specifies the values to use for each option. The DOM API casts these to strings
labels|array(string)|Specifies the labels to use for each corresponding option in the `values` array. If not specified, entries from the `values` array are used

### `RadioButton`

Renders a field component with a Material UI [`Radio` component](https://material-ui.com/api/radio/) as the input 
component. 

### `Checkbox`

Renders a field component with a Material UI [`Checkbox` component](https://material-ui.com/api/checkbox/) as the 
input component.

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