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>
);
};

Help improve this page