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.

Required keys

const schema = [
name: 'username',
label: 'Username',
component: Input,


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.

Optional keys

const schema = [
name: 'password',
label: 'Password',
component: InputFormik,
value: '',
validators: [required, minLength(6)],
additionalProps: { type: 'password' },


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 component.

options and optionsKey

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.

const schema = [
name: 'country',
label: 'Country',
component: SelectFormik,
validators: [required],
options: [
{ label: 'Poland', value: 'pl' },
{ label: 'Greece', value: 'el' },
{ label: 'Cyprus', value: 'cy' },

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.

const schema = [
name: 'movie',
label: 'Favourite Studio Ghibli Movie',
component: SelectFormik,
optionsKey: 'ghibliMovies',
validators: [],

In both cases the array of options must contain objects with label and value keys.


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 valueGetter.


This property should be a function, which will be called with an object containing the following keys:

  • formContext
  • formik
  • name (field name)

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.