# Form summary

Form summary shows all form errors in one place.


## Overview

### Features

Form summary works automatically when placed in a form with form controls from Green Core. It has two update modes, `default` and `reactive`. In the default mode, a `refresh()` method needs to be called for the component to update and reflect the current state of the form. In the `reactive` mode, it will update on the fly as soon as the status of a control in the form changes. The `reactive` mode requires less setup to use, but the `default` mode allows for more control over the behavior.

#### Accessibility

Semantically, the form summary is represented as a navigation region containing an unordered list of links.

#### Compatibility

Form summary is mainly intended for use with form controls from Green Core, but it also works with generic native form controls by using data-attributes.

### Usage

For long forms which are dynamically submitted (meaning the page does not reload), place the form summary at the bottom of the form, close to the submit button, so that it appears in view for the user without scrolling.

For long forms which are server-side driven (page reloads when submitting), place the form summary at the top so that it will be the first thing the user sees when the page reloads.

Short forms, where all controls are easily in view without scrolling, form summary is generally not necessary, since all the errors are already in view.

### Do's and don'ts


## UX Guidelines

### Writing UX text for form summaries

### Multiple fields with same name