#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 referring to.

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

The FormStatus component cooperates together with the GlobalStatus component to summaries and have several status messages in once place.

#Use the FormStatus icons only

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

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 prop is used.

Also all the fields based on the FieldBlock do 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. That means, if the FormStatus is build 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.