Skip to content
Vy logo
Components

ErrorSummary

ErrorSummary shows a summary of user-triggered errors and should be used to give an overview of issues that needs to be addressed by the user in order to proceed.

Examples

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>
  );
};