Components
ErrorSummary
ErrorSummary is a summary of errors. It provides the user with an overview of errors or issues that need to be addressed on a page or step in order to proceed.
React
Unable to parse html
const PreviewEn = () => { return ( <ErrorSummary> <ErrorSummary.Heading> To proceed, you must correct the following errors: </ErrorSummary.Heading> <ErrorSummary.List> <ErrorSummary.Item> <ErrorSummary.Link href='#'> Birthdate cannot be after the year 2005 </ErrorSummary.Link> </ErrorSummary.Item> <ErrorSummary.Item> <ErrorSummary.Link href='#'> Phone number can only contain digits </ErrorSummary.Link> </ErrorSummary.Item> <ErrorSummary.Item> <ErrorSummary.Link href='#'>Email must be valid</ErrorSummary.Link> </ErrorSummary.Item> </ErrorSummary.List> </ErrorSummary> ); }; render(<PreviewEn />)
- asChild
- Type
ReactNode
| Name | Type | Default | Description |
|---|---|---|---|
| asChild | ReactNode | - | - |
ErrorSummaryHeading
- level
- Description
Heading level. This will translate into any h1-6 level unless `asChild` is `true`
- Type
1 | 2 | 3 | 4 | 5 | 6- Default
2
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Heading level. This will translate into any h1-6 level unless `asChild` is `true` |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
ErrorSummaryItem
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
ErrorSummaryLink
- children
- Description
The content to display inside the link.
- Type
ReactNode
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content to display inside the link. |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
ErrorSummaryList
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
Usage
ErrorSummary consists of several subcomponents:
ErrorSummary.Headingdefines the heading.ErrorSummary.Listdefines the list of errors.- Each error is represented as an
ErrorSummary.Itemcontaining anErrorSummary.Link. - Each
ErrorSummary.Linkmust have anhrefto the unique identifier for a form field, so that the user can navigate to the correct place in the form.
Examples
Use with text fields
In order for ErrorSummary.Link to navigate to the fields with errors, the fields must have a unique id that matches the href in the link.
React
Unable to parse html
const WithFormEn = () => { return ( <> <Textfield label='First name' id='first-name' error='First name must be at least 2 characters' /> <Textfield label='Phone' id='phone' type='tel' error='Phone number can only contain digits' /> <ErrorSummary> <ErrorSummary.Heading> To proceed, you must correct the following errors: </ErrorSummary.Heading> <ErrorSummary.List> <ErrorSummary.Item> <ErrorSummary.Link href='#first-name'> First name must be at least 2 characters </ErrorSummary.Link> </ErrorSummary.Item> <ErrorSummary.Item> <ErrorSummary.Link href='#phone'> Phone number can only contain digits </ErrorSummary.Link> </ErrorSummary.Item> </ErrorSummary.List> </ErrorSummary> </> ); }; render(<WithFormEn />)
Moving focus
Below is an example where we move focus to ErrorSummary when it becomes visible.
React
Unable to parse html
const ShowHideEn = () => { const [show, setShow] = useState(false); const summaryRef = useRef<HTMLDivElement>(null); useEffect(() => { if (show) { summaryRef.current?.focus(); } }, [show]); return ( <> <div style={{ display: 'grid', placeItems: 'center', marginBottom: 'var(--ds-size-4)', }} > <Button onClick={() => setShow(!show)}> {show ? 'Skjul' : 'Send inn skjema'} </Button> </div> {show && ( <ErrorSummary ref={summaryRef}> <ErrorSummary.Heading> To proceed, you must correct the following errors: </ErrorSummary.Heading> <ErrorSummary.List> <ErrorSummary.Item> <ErrorSummary.Link href='#first-name'> First name must be at least 2 characters </ErrorSummary.Link> </ErrorSummary.Item> <ErrorSummary.Item> <ErrorSummary.Link href='#phone'> Phone number can only contain digits </ErrorSummary.Link> </ErrorSummary.Item> </ErrorSummary.List> </ErrorSummary> )} </> ); }; render(<ShowHideEn />)
HTML
The class name ds-error-summary is used on a container, the default for React is <div>.
As a child, you must have a heading (preferably <h2>) that has an id that can be referenced with aria-labelledby on the container.
We add a ds-list after the heading that contains a list of errors.
Each error is a <li> with a link (<a>) that has the class ds-link and an href to the relevant field with errors.
CSS variables and data attributes
| Name | Value |
|---|---|
| --dsc-errorsummary-background | var(--ds-color-danger-surface-tinted) |
| --dsc-errorsummary-border-radius | var(--ds-border-radius-md) |
| --dsc-errorsummary-padding | var(--ds-size-6) var(--ds-size-8) |
| --dsc-errorsummary-link-color | var(--ds-color-neutral-text-default) |
| --dsc-errorsummary-heading-color | var(--ds-color-danger-text-default) |
No relevant data attributes found.
Edit this page on github.com (opens in a new tab)