---
name: Form
---

import {Playground, PropsTable} from 'docz'

import {Formik, Form, FastField} from 'formik'
import * as Yup from 'yup'

import {State} from '../reim'
import Button from '../Button'
import Input from '../Input'

# Form

## Reim

You can use `<State/>` from [Reim](https://github.com/IniZio/reim) for simple form states

<Playground>
  <State initial={{value: ''}} setter={{onChange: e => state => {state.value = e.target.value}}}>
    {form => (
      <>
        <div>Curren value: {form.value}</div>
        <Input {...form}/>
      </>
    )}
  </State>
</Playground>

## Formik

An even more advanced form though needs a more advanced tool.

No reason to reinvent the wheel though when [Formik](https://jaredpalmer.com/formik/) does its job so well

Try [Formik](https://www.npmjs.com/package/formik) and [Yup](https://www.npmjs.com/package/yup) yourself :P

<Playground>
  <Formik
    initialValues={{username: '', password: ''}}
    validationSchema={
      Yup.object().shape({
        username: Yup.string().required(),
        password: Yup.string().required()
      })
    }
    onSubmit={values => {alert(JSON.stringify(values, null, 2))}}
    render={() => (
      <Form>
        <label htmlFor="username">Username</label>
        <FastField
          name="username"
          placeholder="usthing"
          render={({form, field}) => (
            <div>
              <Input {...field}/>
              {form.touched.username && form.errors.username && <div>{form.errors.username}</div>}
            </div>
          )}
        />
        <label htmlFor="password">Password</label>
        <FastField
          name="password"
          render={({form, field}) => (
            <div>
              <Input type="password" {...field}/>
              {form.touched.password && form.errors.password && <div>{form.errors.password}</div>}
            </div>
          )}
        />
        <Button type="submit">Submit</Button>
      </Form>
    )}
  />
</Playground>
