Formik

It’s possible to build forms using Forma 36’s components and Formik. In this page we will show a couple of examples on how to do that.

Integrating with <Formik> and <Field> components

import React from 'react';
import { Formik, Field } from 'formik';

import {
  Checkbox,
  Form,
  FormControl,
  Radio,
  Select,
  Textarea,
  TextInput,
} from '@contentful/f36-forms';

export const FormikForm = () => {
  // Initial values must be defined and passed to the Formik component
  const initialValues = {
    textInput: '',
    textarea: '',
    select: 'Mumbai',
    radioGroup: 'apples',
    checkboxGroup: ['apples'],
    checkbox: false,
  };

  // Formik requires that we pass our own validation functions
  const validateRequired = (value) => !value;

  // Create your submit function that will be passed to Formik onSubmit prop
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <Formik onSubmit={onSubmit} initialValues={initialValues}>
      {/* We get the handleSubmit from Formik to pass it to our Form onSubmit */}
      {({ handleSubmit }) => (
        <Form onSubmit={handleSubmit}>
          {/* We create a Field passing our input name and the validation function */}
          <Field name="textInput" validate={validateRequired}>
            {/*
             * field - contains the value, name and handler for the input.
             * meta - contains touched and error state for the input.
             */}
            {({ field, meta }) => (
              // To set the FormControl invalid state, check if there is an error related to this input
              <FormControl isInvalid={Boolean(meta.touched && meta.error)}>
                <FormControl.Label>Text input</FormControl.Label>
                <TextInput {...field} />

                {meta.touched && meta.error && (
                  <FormControl.ValidationMessage>
                    {meta.error}
                  </FormControl.ValidationMessage>
                )}
              </FormControl>
            )}
          </Field>

          {/* Textarea */}
          <Field name="textarea" validate={validateRequired}>
            {({ field, meta }) => (
              <FormControl isInvalid={Boolean(meta.touched && meta.error)}>
                <FormControl.Label>Textarea</FormControl.Label>
                <Textarea {...field} />

                {meta.touched && meta.error && (
                  <FormControl.ValidationMessage>
                    {meta.error}
                  </FormControl.ValidationMessage>
                )}
              </FormControl>
            )}
          </Field>

          {/* Select */}
          <Field name="select">
            {/* Since we don't need to show validation message for select we don't need the meta */}
            {({ field }) => (
              <FormControl>
                {/* We need only to pass all field props to Select */}
                <Select {...field}>
                  <Select.Option value="Cape Town">Cape Town</Select.Option>
                  <Select.Option value="Mumbai">Mumbai</Select.Option>
                  <Select.Option value="Rio de Janeiro">
                    Rio de Janeiro
                  </Select.Option>
                </Select>
              </FormControl>
            )}
          </Field>

          {/* Radio group */}
          <Field name="radioGroup">
            {({ field }) => (
              // For Radio.Group we need to pass the field props into the Radio.Group component
              <Radio.Group {...field}>
                <Radio value="apples">Apples</Radio>
                <Radio value="pears">Pears</Radio>
                <Radio value="peaches">Peaches</Radio>
              </Radio.Group>
            )}
          </Field>

          {/* Checkbox group */}
          <Field name="checkboxGroup">
            {({ field }) => (
              // For Checkbox.Group we need to pass the field props into the Checkbox.Group component
              <Checkbox.Group {...field}>
                <Checkbox value="apples">Apples</Checkbox>
                <Checkbox value="pears">Pears</Checkbox>
                <Checkbox value="peaches">Peaches</Checkbox>
              </Checkbox.Group>
            )}
          </Field>

          {/* Single checkbox */}
          <Field name="checkbox" validate={validateRequired}>
            {({ field, meta }) => (
              <FormControl
                isRequired
                isInvalid={Boolean(meta.touched && meta.error)}
              >
                {/* With a single checkbox component we need to pass the field props into the Checkbox */}
                <Checkbox {...field} defaultChecked={false}>
                  This checkbox is required
                </Checkbox>

                {meta.touched && meta.error && (
                  <FormControl.ValidationMessage>
                    {meta.error}
                  </FormControl.ValidationMessage>
                )}
              </FormControl>
            )}
          </Field>

          <Flex justifyContent="flex-end">
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </Flex>
        </Form>
      )}
    </Formik>
  );
};