@dnb/eufemia/docs/uilib/extensions/forms/Form/useSubmit.md

DNB Eufemia Design System UI Library

---
title: 'Form.useSubmit'
description: '`Form.useSubmit` lets you trigger form submit from outside the form element, e.g. when the submit button is in a modal footer or toolbar.'
version: 11.8.2
generatedAt: 2026-07-03T14:39:19.508Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Form.useSubmit

## Import

```tsx
import { Form } from '@dnb/eufemia/extensions/forms'
// Use Form.useSubmit
```

## Description

The `Form.useSubmit` hook lets you trigger form submit from a component that is **outside** [Form.Handler](/uilib/extensions/forms/Form/Handler/). Give `Form.Handler` an `id` and pass the same `id` to `Form.useSubmit(id)`. This is useful when the submit button is placed in a modal footer, drawer, toolbar, or another part of the layout.

For rendering fields and other form components outside the handler tree, use [Form.Outlet](/uilib/extensions/forms/Form/Outlet/) with the same form handler id (`formHandlerId`).

The hook returns an object with a `submit` function. Calling `submit()` runs validation and, if valid, calls the form's `onSubmit` handler – the same flow as when using [Form.SubmitButton](/uilib/extensions/forms/Form/SubmitButton/) inside the form.

```tsx
import { Form, Field } from '@dnb/eufemia/extensions/forms'

const formId = 'my-form'

function ExternalSubmitButton() {
  const { submit } = Form.useSubmit(formId)
  return (
    <button type="button" onClick={() => submit()}>
      Submit
    </button>
  )
}

function MyForm() {
  return (
    <>
      <Form.Handler id={formId} onSubmit={handleSubmit}>
        <Field.Name.First path="/name" />
      </Form.Handler>
      <ExternalSubmitButton />
    </>
  )
}
```

**Note:** The hook must be used either inside a [Form.Handler](/uilib/extensions/forms/Form/Handler/) or called with an `id` that matches a Form.Handler on the page. It throws if no handler with that `id` is found.

## API

- `submit(): Promise<EventStateObject | undefined>` – Triggers form submit (validation + `onSubmit`). Returns a Promise that resolves with the `onSubmit` result, or `undefined` if validation fails or `onSubmit` returns nothing.

## Demos

### Submit button outside the form

The submit button is rendered outside `Form.Handler` and uses `Form.useSubmit()` to trigger submit. Validation and `onSubmit` run as when using [Form.SubmitButton](/uilib/extensions/forms/Form/SubmitButton/) inside the form.

```tsx
const formId = 'my-form'
const ExternalSubmitButton = () => {
  const { submit } = Form.useSubmit(formId)
  return (
    <Button onClick={() => submit()}>Submit (outside Form.Handler)</Button>
  )
}
render(
  <Flex.Stack>
    <Form.Handler
      id={formId}
      onSubmit={(data) => {
        console.log('Submitted:', data)
      }}
    >
      <Form.Card>
        <Field.Name.First path="/name" value="John" />
      </Form.Card>
    </Form.Handler>

    <ExternalSubmitButton />
  </Flex.Stack>
)
```

### Async submit

The `submit()` function returns a Promise. You can await it to show loading state or react to the result or errors:

```tsx
const formId = 'my-form-async'
const ExternalSubmitButton = () => {
  const { submit } = Form.useSubmit(formId)
  const [loading, setLoading] = useState(false)
  const handleClick = async () => {
    setLoading(true)
    try {
      const result = await submit()
      console.log('Submit result:', result)
    } finally {
      setLoading(false)
    }
  }
  return (
    <Button onClick={handleClick} disabled={loading}>
      {loading ? 'Submitting…' : 'Submit'}
    </Button>
  )
}
render(
  <Flex.Stack>
    <Form.Handler
      id={formId}
      onSubmit={async (data) => {
        await new Promise((r) => setTimeout(r, 1000))
        console.log('Submitted:', data)
      }}
    >
      <Form.Card>
        <Field.Name.First path="/name" value="John" />
      </Form.Card>
    </Form.Handler>
    <ExternalSubmitButton />
  </Flex.Stack>
)
```

## Parameters

Properties passed to the `Form.useSubmit` hook.

```json
{
  "props": {
    "id": {
      "doc": "Optional id (string, function, object or React Context) to link to a Form.Handler outside the component tree. When provided, the hook can be used without being inside Form.Handler.",
      "type": "SharedStateId",
      "status": "optional"
    }
  }
}
```

## Return Values

Properties and methods returned from the `Form.useSubmit` hook.

```json
{
  "props": {
    "submit": {
      "doc": "Triggers form submit. Runs validation and calls the form's `onSubmit` when valid. Use when the submit button is rendered outside Form.Element (e.g. in a modal footer). Returns a Promise that resolves with the submit result or `undefined`.",
      "type": "() => Promise<EventStateObject | undefined>",
      "status": "required"
    }
  }
}
```