---
name: Forms
order: 0
---

import { Playground, Link } from 'docz';
import { Formik, Field } from 'formik';
import * as Yup from 'yup';
import { FormWrapper } from '~/components/FormWrapper';
import { Grid } from '~/components/Grid';
import { Button } from '~/components/Button';
import { TextInput } from '~/components/inputs/TextInput';
import { NumberInput } from '~/components/inputs/NumberInput';
import { DatePickerInput } from '~/components/inputs/DatePickerInput';
import { TimePickerSelect } from '~/components/inputs/TimePickerSelect';
import { FormItem } from '~/components/FormItem';

# Forms

Forms are built using the [Formik library](https://jaredpalmer.com/formik/). Each form input is represented by a [`FormItem`](/src-components-form-item-docs-form-item) component that handles labels and errors display.

You can use the [`Grid`](/src-components-grid-docs-grid) component to compose the layout easily and handle the horizontal and vertical flow.

<Playground>
  <FormWrapper
    validationSchema={Yup.object().shape({
      textInput: Yup.string().required(),
    })}
    onSubmit={() => {}}
    render={({ submitForm }) => (
      <form onSubmit={submitForm}>
        <Grid>
          <FormItem name="textInput">
            <FormItem.Label>The label</FormItem.Label>
            <FormItem.Input
              formikComponent={FastField}
              component={TextInput}
              placeholder="Placeholder"
            />
            <FormItem.Error />
          </FormItem>
          <Grid gridAutoFlow="column" gridAutoColumns="1fr">
            <FormItem name="minimumInvestment">
              <FormItem.Label>
                Minimum number
              </FormItem.Label>
              <FormItem.Input
                component={NumberInput}
                min={0}
                maxDecimals={3}
                placeholder="Enter amount"
                unit="USD"
                useBigNumbers
              />
              <FormItem.Error />
            </FormItem>

            <FormItem name="nonAccreditedMax">
              <FormItem.Label>
                Max number
              </FormItem.Label>
              <FormItem.Input
                component={NumberInput}
                min={1}
                maxDecimals={3}
                placeholder="Enter amount"
                unit="USD"
                useBigNumbers
              />
              <FormItem.Error />
            </FormItem>
          </Grid>
          <FormItem name="cap">
            <FormItem.Label>Amount</FormItem.Label>
            <FormItem.Input
              component={NumberInput}
              placeholder="Enter amount"
              useBigNumbers
            />
            <FormItem.Error />
          </FormItem>
          <Button type="submit">Submit</Button>
        </Grid>
      </form>
    )}

/>

</Playground>

By default the `FormItem` component use Formik's `FastField`. This is important to understand the difference between Formik's `Field` and `FastField` components.
You can switch to `Field` this way:

<Playground>
  <FormWrapper
    render={() => (
      <FormItem name="cap">
        <FormItem.Input component={NumberInput} FormikComponent={Field} />
      </FormItem>
    )}
  />
</Playground>
