You can use a variety of keys in a form control to tune it to your liking. In this section you will see all of the options you can pass into a form control.
This is the name of your field. This is the key of the result values object that will be produced upon the form submission.
A helpful label for the user.
The component that will be rendered as the form control. See Form components for details.
The initial value of your control. If omitted, will become
An array of validation functions for the control. See Validation for details.
An object of props that will be passed down to the
There are two ways to provide the list of options for your select components. The first is to provide it inside the schema directly using the
options key. It's useful for when the list of options does not depend on anything external and can just be constant.
The second way is to provide it via
formContext. You can then specify the
optionsKey in the context object from which the options will be loaded.
In both cases the array of options must contain objects with
This property informs the underlying Formik provider that it should not include this field in its initial values. In practice, this can be used to create fields that depend on other fields, but do not accept user input. It also allows for handling form inputs in components outside of Formik should you need to.
In most applications,
readOnly should be combined with
This property should be a function, which will be called with an object containing the following keys:
Value getters allow for fields which derive their value from other fields or from the context rather than user input.
This is an array of conditions that should be applied to this field. For more details see Conditional rendering.