Skip to main content

Formik - API

Github repo: https://github.com/concrete-form/formik

<Form />

<Form /> renders a <form> HTML element and creates a context for the controls. All controls rendered inside this component will be registered automatically with Formik.

Props

NameTypeRequiredDefaultDescription
initialValues object Forwarded to <Formik />
onSubmit function Forwarded to <Formik />
formikProps object Forwarded to <Formik {...formikProps} />
formProps object Forwarded to <form {...formProps} /> element
noValidate boolean true Shorthand prop for <form noValidate />
layout object Learn how to customize layouts (HTML5 example)
disableWhileSubmitting boolean true Disable all the controls when the form is submitting
language string en For default translations when no translator is provided
translator function Learn how to handle translations

Examples

import Form from '@concrete-form/formik'
import Input from '@concrete-form/html5/Input'
import SubmitButton from '@concrete-form/html5/SubmitButton'

const Demo = () => {
const onSubmit = data => { alert(JSON.stringify(data, undefined, 2)); return true }

return (
<Form initialValues={{ firstName: 'John' }} onSubmit={onSubmit}>
<Input name="firstName" placeholder="What's your first name ?" />
<SubmitButton>submit</SubmitButton>
</Form>
)
}

Formik context

The Formik Context is automatically exposed so it's possible to use useFormikContext() normally inside <Form />.

Custom field properties

fieldProps has no effect when using Formik

Radios, Checkboxes and Select are handled out of the box! for that reason, fieldProps is not needed.

Validation

https://formik.org/docs/guides/validation

caution

field level validation is not yet supported by Concrete Form controls. Use Schema Validation.

tip

Learn how to handle translations