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.
FormStatus icons only
Use theInfoIcon
WarnIcon
ErrorIcon
MarketingIcon
import { InfoIcon } from '@dnb/eufemia/components/FormStatusrender(<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
property 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.
Demos
Displaying error status
<FormStatus text="Failure text" />
Displaying info 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="info" />
Displaying warn status
<FormStatus state="warn" variant="outlined"> Warningmessage. Take notice! </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 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="warn" />
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 />} status_state="info" value="Input value" />, )
Large variant
render( <FormStatus state="info" 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" inherit_color={false} right /> <Icon icon={WarnIcon} size="medium" title="Some title" inherit_color={false} right /> <Icon icon={ErrorIcon} size="medium" title="Some title" inherit_color={false} right /> <Icon icon={MarketingIcon} size="medium" title="Some title" inherit_color={false} />