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

	Name	Type	Required	Default	Description
	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