---
id: error-summary
title: ErrorSummary
---

# ErrorSummary

Use this component at the top of a page to summarize any errors a user has made.

When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.

## How to use

<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/Default.tsx" />

### Linking from the error summary to each answer

You must link the errors in the error summary to the answer they relate to.

For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.

<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/LinkedToInput.tsx" />

When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.

If you do not know which field contains an error, link to the first field.

<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/LinkedToField.tsx" />

For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.

<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/LinkedToCheckbox.tsx" />

## API

See below for a complete reference to all of the props  available to the components mentioned here.

<ComponentProps componentName={["ErrorSummary"]} />