# @myxplor/forms

> A standard way to render our form inputs, textareas, and submit buttons. The best way to get a feel of how these components work is via storybook.

Latest version **0.10.18** (published 2021-05-27) · Unlicense license · 0 weekly downloads

## Install

```sh
npm install @myxplor/forms
pnpm add @myxplor/forms
yarn add @myxplor/forms
bun add @myxplor/forms
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.10.18 |
| Published | 2021-05-27 |
| First published | 2018-02-19 |
| Weekly downloads | 0 |
| License | Unlicense |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 799.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | roblaine, wiob, lex-xplor, waffleau, arjun555, mengopudding, hjemmel, adam-xplor |

## Links

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

## Dependencies (3)

- [@myxplor/icons](https://npm.io/package/@myxplor/icons.md) ^0.9.10
- [react-day-picker](https://npm.io/package/react-day-picker.md) ^7.1.4
- [@myxplor/agent-detection](https://npm.io/package/@myxplor/agent-detection.md) ^0.3.7

## Recent versions

- 0.10.18 (latest) — 2021-05-27
- 0.10.11 — 2020-09-14
- 0.10.10 — 2020-09-14
- 0.10.9 — 2018-07-12
- 0.10.8 — 2018-07-04
- 0.10.7 — 2018-07-02
- 0.10.6 — 2018-06-27
- 0.10.5 — 2018-06-25
- 0.10.4 — 2018-06-23
- 0.10.3 — 2018-06-20
- 0.10.2 — 2018-06-20
- 0.10.1 — 2018-06-12
- 0.10.0 — 2018-06-12
- 0.9.8 — 2018-06-04
- 0.9.7 — 2018-05-30
- … 27 more at https://npm.io/package/@myxplor/forms/versions

## README

# Forms

A standard way to render our form inputs, textareas, and submit buttons.
The best way to get a feel of how these components work is via storybook.

`FormInput`, `FormPassword` and `FormTextArea` all share the below props


* `name` - name of input. `required`
* `onChange` - callback function when input changes. `required`
* `required` - if a value is required, for browser clientside validation. _Also adds "*" after label text_
* `label` - human readable text displayed above input. Optional, if no value provided, uses `name`
* `value` - the default value of the input
* `hint` - hint text, display below the input
* `errors` - an array of errors to be displayed. If this provided, the input will turn red.
* `loading` - if the form is loading/submitting. If is loading, input becomes readonly, and errors are reset. (so that hint text is displayed again)
* `maxLength` - displays a countdown timer of how many chars remaining
* `autoFocus` - if the input should be automatically focused. _Only if the user agent is not a mobile_


> Note: FormSubmit, has its' own set of props. 


```javascript

  <FormInput 
    required={true} 
    name="email"
    label="First Name"
    value="Thomas"
    autoFocus="true"
    onChange={this.handleChange}
  />

```

## With errors

![screen shot 2018-03-09 at 5 01 06 pm](https://user-images.githubusercontent.com/9635/37189885-7e16396e-23bb-11e8-81a2-6e90570b46ef.png)

Pass the `errors` props an array of errors

```javascript

  <FormInput 
    required={true} 
    name="first_name"
    label="First Name"
    value="Thomas"
    errors={[
      "This needs to be filled out"
    ]}
    onChange={this.handleChange}
  />

```

> Note: in your errors, if you pass an object with a key of `title` it will be rendered in bold.

```javascript

  <FormInput 
    name="first_name"
    label="First Name"
    value="Thomas"
    errors={
      [
        { "title": "Opps" },
        "This is terrible"
      ]
    }
    onChange={this.handleChange}
  />

```

![screen shot 2018-03-09 at 5 18 38 pm](https://user-images.githubusercontent.com/9635/37190297-f15b4822-23bd-11e8-8a35-9f8b4f4f0dab.png)

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