---
title: Async forms and autosave
description: Task guidance for async forms and autosave.
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.897Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Async forms and autosave

## Async form handling

It depends on your use case if this feature is needed. But when it is, it's often a time consuming task to implement. Eufemia Forms has therefore a built-in feature that enables async form behavior.

More details about the async form behavior can be found in the [async form behavior](/web/forms/async-forms/#async-form-behavior) section.

## Async form behavior

This feature allows you to perform asynchronous operations such as fetching data from an API, without additional state management.

You can enable async form submit behavior on the form [Form.Handler](/web/forms/Form/Handler/) by using:

```tsx
<Form.Handler onSubmit={async () => {}}>...</Form.Handler>
```

It will disable all fields and show an indicator on the [Form.SubmitButton](/web/forms/Form/SubmitButton/) while the **form** is pending ([examples](/web/forms/Form/Handler/demos/)).

When using [Wizard.Container](/web/forms/Wizard/Container/) you can use in addition:

```tsx
<Wizard.Container onStepChange={async () => {}}>...</Wizard.Container>
```

It will disable all fields and show an indicator on the [Wizard.NextButton](/web/forms/Wizard/NextButton/) while the **step** is pending ([examples](/web/forms/Wizard/Container/demos/)).

### onChange and autosave

You can use an async function for the `onChange` event handler, either on the form [Form.Handler](/web/forms/Form/Handler/):

```tsx
<Form.Handler onChange={async () => {}}>...</Form.Handler>
```

or on every [field](/web/forms/all-fields/):

```tsx
<Field.PhoneNumber path="/myField" onChange={async () => {}} />
```

They can be used in combination as well – including [async validator](/web/forms/validation/#async-validation) functions.

When the user makes a value change, it will show an indicator on the corresponding field label.

This feature cannot only be used for autosave, but for any other real-time async operations.

Here is an example of an async change behavior:


```ts
// Async event handler
const onChange = debounceAsync(async function (data) {
  try {
    await makeRequest(data)
  } catch (error) {
    return error
  }

  // Optionally, you can return an object with these keys, depending your needs
  return {
    info: 'Info message',
    warning: 'Warning message',

    // and either an error
    error: new Error('Error message'),

    // or success (when used for autosave)
    success: 'saved',
  } as const
})
```


More info about the async change behavior in the form [Form.Handler](/web/forms/Form/Handler/#formhandler) section.

### Async field validation

A similar indicator behavior will occur when using async functions for field validation, such as `onChangeValidator` or `onBlurValidation`. Your form will exhibit async behavior, which means that the validation needs to be successfully completed before the form can be submitted.