Form status#

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.

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

Form status is part of the Feedback and dialogs category. More components in this category:

• 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.
• Global error — to show a clear 404 or 500 error page.
• Global status — to show important page-level messages or a summary of form errors.
• Modal — when people must focus on one task or message before returning to the page.

See all in Feedback and dialogs →

Demos#

Start with these patterns and the default state icons. For customization beyond these patterns, follow the usage guidance.

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

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

<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 an inline link in an input status#

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