# 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.

#### Fieldset labels

To reflect the structure of the form, the summary content can be grouped using fieldset labels. These act as headings for related fields and help users quickly understand how the information is organized. By mirroring the same grouping as in the form, it becomes easier to recognize and review the content, improving both clarity and confidence before submission.

### 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