> ## Documentation Index
> Fetch the complete documentation index at: https://docs.formbase.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# React Formik

> Connect Formik forms to Formbase.

Formik already gives you values, validation, and submission state. Formbase accepts those values as JSON, or as `FormData` when you need to upload files.

Below are two patterns you can copy depending on your form type.

<Steps>
  <Step title="Build your Formik form">
    Use Formik as usual to manage values and validation.
  </Step>

  <Step title="Send the submission to Formbase">
    <Tabs>
      <Tab title="JSON submission">
        ```tsx theme={null}
        import { Formik, Form, Field } from 'formik';

        export default function ContactForm() {
          return (
            <Formik
              initialValues={{ name: '', email: '', message: '' }}
              onSubmit={async (values, { resetForm, setStatus }) => {
                const response = await fetch('https://formbase.dev/s/YOUR_FORM_ID', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify(values),
                  redirect: 'manual',
                });

                if (response.status === 303 || response.ok) {
                  setStatus('Submitted!');
                  resetForm();
                  return;
                }

                setStatus('Submission failed.');
              }}
            >
              {({ isSubmitting, status }) => (
                <Form>
                  <Field name="name" placeholder="Name" />
                  <Field name="email" type="email" placeholder="Email" />
                  <Field name="message" as="textarea" />
                  <button type="submit" disabled={isSubmitting}>
                    {isSubmitting ? 'Sending...' : 'Send'}
                  </button>
                  {status && <p>{status}</p>}
                </Form>
              )}
            </Formik>
          );
        }
        ```

        JSON is ideal when you are not uploading files.
      </Tab>

      <Tab title="File uploads">
        ```tsx theme={null}
        import { Formik, Form, Field } from 'formik';

        export default function UploadForm() {
          return (
            <Formik
              initialValues={{ name: '', resume: null }}
              onSubmit={async (values, { setStatus }) => {
                const formData = new FormData();
                formData.append('name', values.name);
                if (values.resume) formData.append('resume', values.resume);

                const response = await fetch('https://formbase.dev/s/YOUR_FORM_ID', {
                  method: 'POST',
                  body: formData,
                  redirect: 'manual',
                });

                setStatus(response.status === 303 || response.ok ? 'Uploaded!' : 'Upload failed');
              }}
            >
              {({ isSubmitting, setFieldValue, status }) => (
                <Form encType="multipart/form-data">
                  <Field name="name" placeholder="Name" />
                  <input
                    name="resume"
                    type="file"
                    onChange={(event) => {
                      setFieldValue('resume', event.currentTarget.files?.[0] ?? null);
                    }}
                  />
                  <button type="submit" disabled={isSubmitting}>
                    {isSubmitting ? 'Uploading...' : 'Upload'}
                  </button>
                  {status && <p>{status}</p>}
                </Form>
              )}
            </Formik>
          );
        }
        ```

        Use `FormData` and set the file input manually in Formik.
      </Tab>
    </Tabs>
  </Step>
</Steps>

<Callout type="note">
  Client-side submissions receive a `303` redirect response. Treat it as success or submit from your server for JSON.
</Callout>