---
name: FormItem
menu: Components
---

import { PropsTable, Playground } from 'docz';
import { Field, FastField } from 'formik';
import * as Yup from 'yup';

import { FormWrapper } from '~/components/FormWrapper';
import { TextInput } from '~/components/inputs/TextInput';
import { FormItem } from '../';

# FormItem

<PropsTable of={FormItem} />

## Basic usage

<Playground>
  <FormWrapper
    validationSchema={Yup.object().shape({
      textInput: Yup.string().required(),
    })}
    render={() => (
      <FormItem name="textInput">
        <FormItem.Label>The label</FormItem.Label>
        <FormItem.Input
          FormikComponent={FastField}
          component={TextInput}
          placeholder="Placeholder"
        />
        <FormItem.Error />
      </FormItem>
    )}
  />
</Playground>
