ErrorSummary

A simple ErrorSummary component

<ErrorSummary heading="Correct the following errors to proceed">
  <ErrorSummaryItem href="#email-field">
    E-mail field is required
  </ErrorSummaryItem>
  <ErrorSummaryItem href="#phonenumber-field">
    Phonenumber field is required
  </ErrorSummaryItem>
</ErrorSummary>

The focus should be placed on the ErrorSummary the moment it appears in the user interface.

() => {
  const errorRef = React.useRef<HTMLDivElement>(null);
  const [hasError, setHasError] = React.useState(false);

  React.useEffect(() => {
    if (hasError && errorRef.current) {
      errorRef.current.focus();
    }
  }, [hasError]);

  return (
    <Flex direction="column" gap="5">
      {hasError && (
        <ErrorSummary ref={errorRef} heading="Correct the following errors to proceed">
          <ErrorSummaryItem href="#email-field">
            E-mail field is required
          </ErrorSummaryItem>
          <ErrorSummaryItem href="#phonenumber-field">
            Phonenumber field is required
          </ErrorSummaryItem>
        </ErrorSummary>
      )}
      <Button
        onClick={() => {
          hasError ? errorRef.current?.focus() : setHasError(true);
        }}
      >
        Submit form
      </Button>
    </Flex>
  );
};

The ErrorSummary should be used to display an overview of errors that are user-triggered. This can for example be errors that appear in a form if the fields have certain rules that must be followed for them to be valid.

To show a system-error, please use Alerts.

Move the focus to the ErrorSummary-component each time the user tries to proceed while there are still errors present. When the component receives focus the screen will scroll to the component so it becomes visible, and voiceover will read out the content.

We recommend that an ErrorSummary is placed close to what triggers it to be shown. For example, if a Submit-button triggers the ErrorSummary to be shown, we recommend placing the ErrorSummary either over or below the button.

An ErrorSummary should:

• Have a heading that clearly states that errors must be corrected before the user can proceed.
• Contain all errors that hinders the user to proceed
• Have items that directly link the user to the fields where errors are present
• Get updated continuously to show only the errors that are still present