<Field /> will automagically hook up inputs to Formik. It uses the name
attribute to match up with Formik state. <Field /> will default to an HTML
<input /> element.
There are a few different ways to render things with <Field>.
<Field render>deprecated in 2.x. Using these will log warning
as can either be a React component or the name of an HTML element to render. Formik will automagically inject onChange, onBlur, name, and value props of the field designated by the name prop to the (custom) component.
children can either be an array of elements (e.g. <option> in the case of <Field as="select">) or a callback function (a.k.a render prop). The render props are an object containing:
field: An object containing onChange, onBlur, name, and value of the field (see FieldInputProps)
form: The Formik bag
meta: An object containing metadata (i.e. value, touched, error, and initialValue) about the field (see FieldMetaProps)
component can either be a React component or the name of an HTML element to render. All additional props will be passed through.
In Formik 0.9 to 1.x, the render prop could also be used for rendering. It has been deprecated since 2.x. While the code still lives within <Field>, using render will show a warning in the console.
You can run independent field-level validations by passing a function to the
validate prop. The function will respect the validateOnBlur and
validateOnChange config/props specified in the <Field>'s parent <Formik>
/ withFormik. This function can either be synchronous or asynchronous:
Sync: if invalid, return a string containing the error message or
Async: return a Promise that resolves a string containing the error message.
This works like Formik's validate, but instead of returning an errors
object, it's just a string.