Skip to content
Home

FormStatus (Messageboxes)

Info
Demos
Properties

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 info
  • WarnIcon error
  • ErrorIcon error
  • MarketingIcon marketing
import { InfoIcon } from '@dnb/eufemia/components/FormStatus


render(<InfoIcon />)

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

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

FormStatus displaying error status

Failure text
Code Editor
<FormStatus text="Failure text" />

FormStatus displaying info status

Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus
Code Editor
<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"
/>

A stretched and independent FormStatus

NB: The inner text gets a max-width of 47rem to ensure we do not exceed 70 characters limit per line.

Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus
Code Editor
<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"
/>

FormStatus displaying warn status

Warningmessage. Take notice!
Code Editor
<FormStatus state="warn" variant="outlined">
  Warningmessage. Take notice!
</FormStatus>

FormStatus displaying marketing status

Marketingmessage. What a deal!
Code Editor
<FormStatus state="marketing" variant="outlined">
  Marketingmessage. What a deal!
</FormStatus>

A FormStatus, used by the Input Component

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

A FormStatus, with a custom-styled content

My info with a link and more text
Code Editor
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"
  />,
)

A FormStatus with plain text/HTML

My HTML with a link and more text
Code Editor
const myHTML = `
  My HTML
  <a class="dnb-anchor" href="/" target="_blank">with a link</a>
  and more text
`
const CustomStatus = () => (
  <span
    dangerouslySetInnerHTML={{
      __html: myHTML,
    }}
  />
)
render(
  <FormStatus state="info" size="large" variant="outlined">
    <CustomStatus />
  </FormStatus>,
)

In combination with the Icon component

Code Editor
<Icon
  icon={<InfoIcon theme={theme} />}
  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}
/>