In order to use the automatic form management the provided <Form> component has to be used with a name provided. If that's done, then, the onSubmit event on the form is going to have the actual values of the fields inside that form.

<Form name="user" onSubmit={(user, resetValues) => console.log(user)}>
  ...
</Form>

The second argument resetValues allow us to reset all the fields inside the form. The Form component also accepts a resetWhenDefaultsChange prop that if set to true, will do basically that.

Each field inside that form is going to receive onChange and value props that are managed by the form itself. The name prop in the field is also required in order for the automatic form management to work. E.g.

<Input name="userName" />

It's possible to override the default onChange prop. Simply provide a new onChange function that will have the following signature:

<Input name="userName" onChange={(value, name, onChangeField) => ...} />

Where value is the current value of the field, name is the name of the field and onChangeField is the original onChange prop provided by the form.

In order for changes to be registered, onChangeField has to be manually called. Basically, what the form by default is doing is:

<Input name="userName" onChange={(value, name, onChangeField) => onChangeField(value, name)} />

It is possible to provide default values to the form. The best approach is to provide the defaults as an object to the Form component itself. That way, they're taked into account in the result of the onSubmit event. The defaultValues prop in the Form accepts an object with the same keys as the names of the fields inside that form. E.g.

<Form name="user" defaultValues={{ userName: 'Pepe' }}>
  <Input name="userName" />
</Form>