ErrorSummary

The error list at the top of a long form after a failed POST. Each item links to its field.

FeedbackIsland

Examples

Two invalid fields

On a page it takes focus once; inside a dialog pass autoFocus={false} (the dialog focuses the first invalid field).

Fix 2 fields to continue

Enter the server URL, starting with https://
Header name can’t contain spaces

Server URL

Enter the server URL, starting with https://

Header name

Header name can’t contain spaces

Example

Wrap

<ErrorSummary errors={[
  { field: 'server-url', message: 'Enter the server URL, starting with https://' },
  { field: 'header-name', message: 'Header name can’t contain spaces' },
]} />

Usage

Wrap

import { ErrorSummary } from '@switchboard/ui'

{errors.length ? <ErrorSummary errors={errors} /> : null}

Props

Every component also takes mix, for css() and mixins applied after its own style.

`ErrorSummary`

ErrorSummary props
Prop	Type	Default	Description
errors*	{ field: string; message: string }[]	–	field is the control id. Renders nothing when empty.
title	string	'Fix N fields to continue'	Heading.
autoFocus	boolean	true	Take focus once after render. Off inside dialogs.

Accessibility

A focusable group (tabindex=-1) named by its heading; it takes focus once so screen readers read it first.
Links are real #id anchors (work without JS); with JS they also move focus into the field.
Repeat each message on its Field so it is announced again on the control.