@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
191 lines (162 loc) • 4.71 kB
Markdown
---
title: 'Form.SubmitIndicator'
description: '`Form.SubmitIndicator` lets you show an indicator while async form operations are performed.'
version: 10.104.0
generatedAt: 2026-04-17T18:46:12.381Z
checksum: a39d076f906999737f2849a316a1da061f13658d996f615e37a75d8866950cba
---
```tsx
import { Form } from '@dnb/eufemia/extensions/forms'
render(<Form.SubmitIndicator />)
```
`Form.SubmitIndicator` lets you show an indicator while async form operations are performed.
```jsx
import { Form } from '@dnb/eufemia/extensions/forms'
render(<Form.SubmitIndicator state="pending" />)
```
The indicator is implemented by default in the [Form.SubmitButton](/uilib/extensions/forms/Form/SubmitButton/) and [FieldBlock](/uilib/extensions/forms/create-component/FieldBlock/) label. It will be displayed when the `onSubmit` event handler on the [Form.Handler](/uilib/extensions/forms/Form/Handler/) component is an async function. You can find some examples down below.
```tsx
render(<Form.SubmitIndicator state="pending" />)
```
### SubmitIndicator in a simple form
Press the "Send" button to see the submit indicator.
```tsx
const delay = debounceAsync(async function () {
try {
const request = createRequest()
await request(1000) // Simulate a request
} catch (error) {
return error
}
})
render(
<Form.Handler onSubmit={delay}>
<Form.Card>
<Field.String path="/myField" label="Short label" />
<Form.ButtonRow>
<Form.SubmitButton />
<Button variant="tertiary">Cancel</Button>
</Form.ButtonRow>
</Form.Card>
</Form.Handler>
)
```
This example shows a combination of async validation and async change behavior, which could be used for e.g. **autosaving** the field value.
**NB:** if the indicator in the label does not have enough room, it will animate to a new line.
Make a change in the input field.
```tsx
const delay = debounceAsync(async function () {
try {
const request = createRequest()
await request(1000) // Simulate a request
} catch (error) {
return error
}
})
render(
<Form.Handler onSubmit={delay} onChange={delay}>
<Form.Card>
<Field.String
path="/myField1"
label="Label (with async validation)"
placeholder="Write something ..."
onChangeValidator={delay}
/>
<FieldBlock width="medium">
<Field.String
path="/myField2"
width="stretch"
label="This is a long label"
/>
</FieldBlock>
<Form.ButtonRow>
<Form.SubmitButton />
<Button variant="tertiary">Cancel</Button>
</Form.ButtonRow>
</Form.Card>
</Form.Handler>
)
```
```tsx
render(
<Form.Handler>
<Flex.Horizontal align="center">
<Form.SubmitButton showIndicator />
<Button variant="secondary" icon="chevron_right">
Secondary
<Form.SubmitIndicator state="pending" />
</Button>
<Button variant="tertiary">
Tertiary
<Form.SubmitIndicator state="pending" />
</Button>
<FormLabel>
Label
<Form.SubmitIndicator state="pending" />
</FormLabel>
</Flex.Horizontal>
</Form.Handler>
)
```
### With a label
```tsx
render(
<Form.Handler>
<Form.SubmitIndicator state="pending" showLabel />
</Form.Handler>
)
```
## Properties
```json
{
"props": {
"state": {
"doc": "Provide `pending` to make the dots visible and `success` to show the checkmark icon.",
"type": "string",
"status": "required"
},
"showLabel": {
"doc": "If `true`, the label will be shown. Defaults to `false`.",
"type": "boolean",
"status": "optional"
},
"label": {
"doc": "Provide a label that will be shown next to the indicator.",
"type": "string",
"status": "optional"
},
"children": {
"doc": "If content is provided, the component will try to find out if the indicator needs to be put on a new row or not. This way it will animate the height nicely.",
"type": "React.Node",
"status": "optional"
},
"[Space](/uilib/layout/space/properties)": {
"doc": "Spacing properties like `top` or `bottom` are supported.",
"type": ["string", "object"],
"status": "optional"
}
}
}
```
```json
{
"locales": ["da-DK", "en-GB", "nb-NO", "sv-SE"],
"entries": {
"SubmitIndicator.label": {
"nb-NO": "Vennligst vent",
"en-GB": "Please wait",
"sv-SE": "Vänligen vänta",
"da-DK": "Vent venligst"
}
}
}
```