<h1 align="center">@any-ui/form</h1>

### Simple, self contained form management



[![npm package](https://img.shields.io/npm/v/@any-ui/form/next?style=for-the-badge)](https://www.npmjs.com/package/@any-ui/core)
[![licence](https://img.shields.io/npm/l/@any-ui/form?style=for-the-badge)](https://www.npmjs.com/package/@any-ui/core)
![npm type definitions](https://img.shields.io/npm/types/@any-ui/form?style=for-the-badge)
![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4?style=for-the-badge)
![react](https://img.shields.io/badge/react-latest-brightgreen?style=for-the-badge&logo=react)
![react router](https://img.shields.io/badge/react--router-latest-brightgreen?style=for-the-badge&logo=react-router)

[![PeerDependencies](https://david-dm.org/nickvirtue/any-ui/next/peer-status.svg?path=packages/any-ui-form)](https://david-dm.org/nickvirtue/any-ui/master?type=peer&path=packages/any-ui-core)
[![Dependencies](https://david-dm.org/nickvirtue/any-ui/next/status.svg?path=packages/any-ui-form)](https://david-dm.org/nickvirtue/any-ui/master?path=packages/any-ui-core)
[![DevDependencies](https://david-dm.org/nickvirtue/any-ui/next/dev-status.svg?path=packages/any-ui-form)](https://david-dm.org/nickvirtue/any-ui/master?type=dev&path=packages/any-ui-core)

Built on top of [React Final Form](https://final-form.org/react)


## Warning
This is an unstable alpha channel of any-ui, find the latest stable release **[here](https://github.com/nickvirtue/any-ui)**.

## Installation


```sh
// with npm
npm install @any-ui/form@next

// with yarn
yarn add @any-ui/form@next
```

Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.


**Example [code](https://github.com/nickvirtue/any-ui/tree/master/packages/example-app/src/form)** showing intended use

```typescript jsx
import {
  EmailField,
  Form,
  FormSubmitHandler,
  PasswordField,
  TextField,
} from '@any-ui/form'

interface IFormFields {
  name: string
  password: string
  email: string
  address: string
}
const handleSubmit: FormSubmitHandler<IFormFields> = async values => {
  alert(`Submit success for ${values.name}`)
}

<Form<IFormFields> onSubmit={handleSubmit}>
  <TextField 
    required 
    autoFocus 
    name="name" 
    label="Name" />
  <PasswordField 
    required 
    name="password" 
  />
  <EmailField 
    name="email" 
    label="Email"
  />
  <TextField 
    name="address" 
    label="Address" 
    rows={5} 
    />
</Form>
```
Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.



#### Documentation
  One day....
