---
title: 'FormStatus (Messageboxes)'
description: 'The FormStatus is a simple component meant for displaying the status of a form (errors, messages, etc.).'
version: 11.2.2
generatedAt: 2026-05-11T08:17:54.770Z
checksum: 1917a74e4d47bb4108acb0382b864fc14f65214e17d98302bb720f1ceb1d227c
---

# FormStatus (Messageboxes)

## 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](/uilib/components/global-status) component to summarize and display several status messages in one place.

## 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/uilib/components/form-status)


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

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

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

render(<InfoIcon />)
```

... or in combination with the [Icon](/uilib/components/form-status?fullscreen#form-status-icons) component. Have a look [at this example](/uilib/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.

The `FormStatus` should be placed in the DOM before the form element itself and it should be linked together with the related form element by using `aria-describedby`.

This will allow screen readers to find and announce the error message without too much frustration.

This is done automatically in all Eufemia components when the `status` property is used.

Also, all the [fields](/uilib/extensions/forms/all-fields/) based on the [FieldBlock](/uilib/extensions/forms/create-component/FieldBlock) support this feature without additional work. The `FieldBlock` also supports grouped messages and showing an error, warning, and info message 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.


## Demos

### Displaying error status


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


### Displaying information status


```tsx
render(<FormStatus title="Hover title" 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>)
```


### 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 a custom-styled content


```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={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>)
```

## Properties


```json
{
  "props": {
    "text": {
      "doc": "The `text` appears as the status message. Besides plain text, you can send in a React component as well.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "children": {
      "doc": "The `text` appears as the status message. Besides plain text, you can send in a React component as well.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "title": {
      "doc": "The `title` attribute in the status.",
      "type": "string",
      "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` and `marketing`. The default status is `error`.",
      "type": [
        "\"error\"",
        "\"warning\"",
        "\"information\"",
        "\"success\"",
        "\"marketing\""
      ],
      "status": "optional"
    },
    "size": {
      "doc": "Defines the appearance size. There are these sizes `default`, `large`. The default status is `default`.",
      "type": [
        "\"default\"",
        "\"large\""
      ],
      "status": "optional"
    },
    "icon": {
      "doc": "The `icon` show before the status text. Defaults to `error`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "iconSize": {
      "doc": "The icon size of the icon shows. Defaults to `medium`.",
      "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": "**NB:** Animation is disabled as of now. ~~Use `true` to omit the animation on content visibility. Defaults to `false`.~~",
      "type": "boolean",
      "status": "optional"
    },
    "globalStatus": {
      "doc": "The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).",
      "type": "Various",
      "status": "optional"
    },
    "shellSpace": {
      "doc": "Use it to set an inner margin. It supports the same properties as [Space](/uilib/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](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  }
}
```