---
title: Form status
description: Use FormStatus to show validation errors, warnings, or messages near a form.
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.151Z
checksum: 14a06662db5976780f35680db1d305c72d1315c3d8e6bbf12a7784a7329c12d7
---

# Form status

## Import

```tsx
import { FormStatus } from '@dnb/eufemia'
```

## Description

The FormStatus is a simple component meant for displaying the status of a form (displaying form errors, messages, etc.).
The `FormStatus` component should be positioned relative to the form or form input to which it is referring.

Also, the `FormStatus` is used inside of many other form components.

The `FormStatus` component cooperates with the [GlobalStatus](/web/components/global-status) component to summarize and display several status messages in one place.

## Usage

Start with the documented patterns and the default icon for the selected `state`. Prefer plain text for the message. Inline links can help the user resolve the status, and [FieldBlock](/web/forms/create-component/FieldBlock) can combine messages from several fields into one status.

The content and icon properties also provide flexibility for specific integrations. Custom content, actions, or icon changes beyond the documented patterns need a use case approved by DNB UX. The same guidance applies when FormStatus is configured through another component's `statusProps`.

## Relevant links

- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=16838-6706)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/form-status)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/components/form-status)


## Use the [**FormStatus**](/web/components/form-status) icons only

- `InfoIcon` <InfoIcon />
- `SuccessIcon` <SuccessIcon />
- `WarnIcon` <WarnIcon />
- `ErrorIcon` <ErrorIcon />
- `MarketingIcon` <MarketingIcon />

```jsx
import { InfoIcon } from '@dnb/eufemia/components/FormStatus'

render(<InfoIcon />)
```

... or in combination with the [Icon](/web/components/icon) component. Have a look [at this example](/web/components/form-status#in-combination-with-the-icon-component).


## Accessibility

The `FormStatus` component is designed to be accessible. It is important to provide a meaningful message to the user. The `FormStatus` component should be used to provide feedback to the user about the status of the form or form input.

When you use `FormStatus` directly, place it before the related form element in the DOM and link it with `aria-describedby`. This lets screen readers find and announce the status message.

Eufemia components set this link automatically when the `status` property is used. Fields that use [useFieldProps](/web/forms/create-component/useFieldProps/) do the same. Their [FieldBlock](/web/forms/create-component/FieldBlock) renders status messages after the field contents in the DOM so grouped messages can include nested fields in server-rendered HTML. `FieldBlock` also supports showing error, warning, and info messages at the same time.

### Width alignment

In order to enhance accessibility (readability), the FormStatus will align its width to a linked component. This means that if the FormStatus is built into the Input component, it will inherit the width of the input.

The `min-width` is set to be **12rem**. Use CSS `min-width` or `max-width` to set a custom (manual) width.


## Related components

Form status is part of the [Feedback and dialogs](/web/components/overview/#feedback) category. More components in this category:

- [Badge](/web/components/badge/) – to highlight new, unread, or important information.
- [Dialog](/web/components/dialog/) – when people need to make a choice or read an important message before continuing.
- [Drawer](/web/components/drawer/) – to show extra content in a panel that slides in from the side.
- [Global error](/web/components/global-error/) – to show a clear 404 or 500 error page.
- [Global status](/web/components/global-status/) – to show important page-level messages or a summary of form errors.
- [Modal](/web/components/modal/) – when people must focus on one task or message before returning to the page.

[See all in Feedback and dialogs](/web/components/overview/#feedback)


## Demos

Start with these patterns and the default state icons. For customization beyond these patterns, follow the [usage guidance](/web/components/form-status/#usage).

### Displaying error status


```tsx
render(<FormStatus text="Failure text" />)
```


### With a refresh action


```tsx
render(<FormStatus>
      An error occurred while loading content.{' '}
      <Anchor href="">Try again</Anchor>
    </FormStatus>)
```


### Displaying information status


```tsx
render(<FormStatus text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus" state="information" />)
```


### Displaying warning status


```tsx
render(<FormStatus state="warning" variant="outlined">
      Warningmessage. Take notice!
    </FormStatus>)
```


### With a button as content

Use an action that helps the user resolve the status. Other actions or custom layouts need a use case approved by DNB UX.


```tsx
render(<FormStatus state="warning" variant="outlined">
      Text{' '}
      <Button variant="tertiary" text="Button as content" icon="bell" />
    </FormStatus>)
```


### Displaying marketing status


```tsx
render(<FormStatus state="marketing" variant="outlined">
      Marketingmessage. What a deal!
    </FormStatus>)
```


### Stretching the status message

**NB:** The inner text has a max-width of `var(--prose-max-width)` (defaults to `60ch`) to ensure we do not exceed characters limit per line for accessibility reasons.


```tsx
render(<FormStatus stretch={true} text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus" state="warning" />)
```


### Used by the Input Component


```tsx
render(<Input label="Input with status" status="You have to fill in this field" value="Input value" />)
```


### With an inline link in an input status


```tsx
const CustomStatus = () => <>
          My info <Link href="/">with a link</Link> and more text
        </>;
render(<Input label="Input with custom status" status={<CustomStatus />} statusState="information" value="Input value" />);
```


### Large variant


```tsx
render(<FormStatus state="information" size="large" variant="outlined">
          My HTML{' '}
          <Anchor href="/" target="_blank">
            with a link
          </Anchor>{' '}
          and more text
        </FormStatus>);
```


### In combination with the Icon component


```tsx
<Icon icon={<InfoIcon />} size="medium" title="Some title" inheritColor={false} right />
<Icon icon={SuccessIcon} size="medium" title="Some title" inheritColor={false} right />
<Icon icon={WarnIcon} size="medium" title="Some title" inheritColor={false} right />
<Icon icon={ErrorIcon} size="medium" title="Some title" inheritColor={false} right />
<Icon icon={MarketingIcon} size="medium" title="Some title" inheritColor={false} />
```



  
```tsx
render(<Grid.Container columns={{
  small: 2,
  medium: 3,
  large: 3
}} columnGap="small" rowGap="small">
      <Grid.Container columns={1}>
        <FormStatus text="Text" state="information" variant="plain" />
        <FormStatus text="Text" state="information" variant="outlined" />
      </Grid.Container>
      <Grid.Container columns={1}>
        <FormStatus text="Text" state="success" />
        <FormStatus text="Text" state="success" variant="outlined" />
      </Grid.Container>
      <Grid.Container columns={1}>
        <FormStatus text="Text" state="warning" variant="plain" />
        <FormStatus text="Text" state="warning" variant="outlined" />
      </Grid.Container>
      <Grid.Container columns={1}>
        <FormStatus text="Text" state="error" variant="plain" />
        <FormStatus text="Text" state="error" variant="outlined" />
      </Grid.Container>
      <Grid.Container columns={1}>
        <FormStatus text="Text" state="marketing" />
        <FormStatus text="Text" state="marketing" variant="outlined" />
      </Grid.Container>
    </Grid.Container>)
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```json
{
  "props": {
    "text": {
      "doc": "The status message. Prefer plain text that explains the status and how to resolve it. React content supports inline links and grouped messages. Custom content or actions beyond the documented patterns need a use case approved by DNB UX.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "children": {
      "doc": "Alternative to `text`, with the same usage guidance. Supports inline links and the grouped messages rendered by FieldBlock. Custom content or actions beyond the documented patterns need a use case approved by DNB UX.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "role": {
      "doc": "The `role` attribute for accessibility, defaults to `alert`.",
      "type": "string",
      "status": "optional"
    },
    "state": {
      "doc": "Defines the visual appearance of the status. These are the statuses `error`, `warning`, `information`, `success` and `marketing`. The default status is `error`.",
      "type": [
        "\"error\"",
        "\"warning\"",
        "\"information\"",
        "\"success\"",
        "\"marketing\""
      ],
      "status": "optional"
    },
    "size": {
      "doc": "Defines the appearance size. Available sizes are `default` and `large`. The default size is `default`.",
      "type": [
        "\"default\"",
        "\"large\""
      ],
      "status": "optional"
    },
    "icon": {
      "doc": "The icon shown before the status message. The default icon is selected by `state`. Keep this default unless DNB UX has approved a use case for replacing or removing it.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "iconSize": {
      "doc": "The size of the icon. Defaults to `medium`. Keep this default unless DNB UX has approved a use case for a different size.",
      "type": "string",
      "status": "optional"
    },
    "variant": {
      "doc": "As of now, there is the `plain` and the `outlined` variant. Defaults to `plain`.",
      "type": [
        "\"plain\"",
        "\"outlined\""
      ],
      "status": "optional"
    },
    "stretch": {
      "doc": "If set to `true`, then the FormStatus will be 100% in available `width`. **NB:** Only use this on independent status messages.",
      "type": "boolean",
      "status": "optional"
    },
    "show": {
      "doc": "Provide `false` if you want to animate the visibility. Defaults to `true`.",
      "type": "boolean",
      "status": "optional"
    },
    "noAnimation": {
      "doc": "~~Use `true` to omit the animation on content visibility. Defaults to `false`.~~ **NB:** Animation is disabled as of now.",
      "type": "boolean",
      "status": "optional"
    },
    "globalStatus": {
      "doc": "The [configuration](/web/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/web/components/global-status).",
      "type": "Various",
      "status": "optional"
    },
    "shellSpace": {
      "doc": "Use it to set an inner margin. It supports the same properties as [Space](/web/layout-and-typography/layout/space/properties). Useful for animation.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    },
    "skeleton": {
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
      "type": "boolean",
      "status": "optional"
    },
    "[Space](/web/layout-and-typography/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```