FormStatus (Messageboxes)#

Import#

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 component to summarize and display several status messages in one place.

Relevant links#

• Figma
• Source code
• Docs code

Use the FormStatus icons only#

• InfoIcon
• SuccessIcon
• WarnIcon
• ErrorIcon
• MarketingIcon

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

render(<InfoIcon />)

... or in combination with the Icon component. Have a look at this example.

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 do the same. Their 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#

FormStatus is part of the Feedback category. Other components for similar needs:

• AriaLive — to announce page changes to screen reader users.
• Badge — to highlight new, unread, or important information.
• Dialog — when people need to make a choice or read an important message before continuing.
• Drawer — to show extra content in a panel that slides in from the side.
• GlobalError — to show a clear 404 or 500 error page.
• GlobalStatus — to show important page-level messages or a summary of form errors.

See all in Feedback →

Demos#

Displaying error status#

<FormStatus text="Failure text" />

With a refresh action#

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

Displaying information status#

<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#

<FormStatus state="warning" variant="outlined">
  Warningmessage. Take notice!
</FormStatus>

With a button as content#

<FormStatus state="warning" variant="outlined">
  Text <Button variant="tertiary" text="Button as content" icon="bell" />
</FormStatus>

Displaying marketing status#

<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.

<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#

<Input
  label="Input with status"
  status="You have to fill in this field"
  value="Input value"
/>

With a custom-styled content#

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#

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#

<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}
/>