Components

Page alerts

Page alerts attract users’ attention to important information or changes on a page.

When to use it

Use the page alerts component to inform users of:

important information
changes on a page
successful or unsuccessful completion of a task.

They should be relevant and as minimally disruptive as possible.

When not to use it

Page alerts should be used sparingly. If used too frequently, they can create a disruptive experience for users. Overuse may also lead to users becoming desensitised to the alerts and missing or ignoring important information.

The page alerts component should not be used for site or system-wide alerts. Its role is to notify users on important information or changes on a page, rather than site or system-wide changes.

Site and system-wide alerts will be developed as part of the banner component during the Design System’s beta phase.

How it works

All alerts use a colour and icon that corresponds with their message intent. The alert type — information, warning, success, or error — is communicated to all users by:

the visual appearance, including the icon and colour
the first word of the alert's heading, for example, ‘Warning’.

Changing the word at the start of the alert heading, or removing it, could make the alert less understandable, and therefore less accessible, to some users. If the type or strength of the alert is not indicated in text or in some other way for assistive technology users, it will also fail the NZ Government Web Accessibility Standard.

Success and error summary alert messages appear at the top of a page following a submit action. They should give users clear, descriptive next steps.

Information and warning alert messages can appear at the top of the page or in the body of the content. If used in the body, alert messages should appear next to the content they relate to.

Static alerts

Static alerts are added as part of a new page or view after a change of context, such as following a link or submitting a form. These are considered static because they remain unchanged unless there is another change of context.

Information and warning alerts can be used in a wide range of scenarios. Success and error summary alerts are only ever used following a form submission, which is a change of context for the user. These alerts will always be static and part of a new page or view when it is loaded.

Additionally, when the new page or view is first loaded, the Design System user must ensure that focus is moved to the success or error summary alert. This will cause it to be announced automatically by screen reader software, letting the user know the status of their form submission and what, if anything, they need to do to continue.

The Design System user should also update the title element to start with "Success:" or "Error:" so that the feedback is provided in the page’s name.

Live alerts

Live alerts are dynamically inserted into an existing page or view as an immediate response to a user’s action, such as checking a checkbox. They’re used where the change to the page’s content is not significant enough to constitute a change of context.

When implemented as a live alert, the alert container needs to be empty and present in the document object model (DOM) when the page or view is first loaded. The actual alert message is then dynamically inserted into the container following whatever user action triggers the alert.

To ensure that screen reader users are notified of a live alert, the alert container is marked up as a live region. When content is dynamically inserted in a live region container, that content is automatically announced to the user by the screen reader.

Success and error summary alerts are not intended to be used as live alerts. Since they always follow form submission, which is a change of context, they are always static. However, if they are used as live alerts, they should be tested for accessibility. Also, as live alerts are already announced automatically to screen reader users, the alert should not receive focus.

Information

Use information alerts to inform users of important information or changes on a page only. They should be used sparingly.

Information alert: Static

Open this example in a new window

Code

React with Styled Components (JavaScript)import React from "react"; import Alert from "@govtnz/ds/build/react-js-styled-components/Alert"; import H2 from "@govtnz/ds/build/react-js-styled-components/H2"; import P from "@govtnz/ds/build/react-js-styled-components/P"; export default () => ( <Alert level="info" headingId="heading1"> <H2 id="heading1">Note: Nominations are currently closed</H2> <P marginBottom0> You can nominate a new provider at the start of the next financial year. </P> </Alert> );

React with Styled Components (TypeScript)import React from "react"; import Alert from "@govtnz/ds/build/react-ts-styled-components/Alert"; import H2 from "@govtnz/ds/build/react-ts-styled-components/H2"; import P from "@govtnz/ds/build/react-ts-styled-components/P"; export default () => ( <Alert level="info" headingId="heading1"> <H2 id="heading1">Note: Nominations are currently closed</H2> <P marginBottom0> You can nominate a new provider at the start of the next financial year. </P> </Alert> );

Vue (JavaScript)<template> <c-alert level="info" headingId="heading1"> <c-h2 id="heading1"> Note: Nominations are currently closed </c-h2> <c-p marginBottom0> You can nominate a new provider at the start of the next financial year. </c-p> </c-alert> </template> <script> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-js/Alert.vue"; import H2 from "@govtnz/ds/build/vue-js/H2.vue"; import P from "@govtnz/ds/build/vue-js/P.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-p": P } }; </script>

Vue (TypeScript)<template> <c-alert level="info" headingId="heading1"> <c-h2 id="heading1"> Note: Nominations are currently closed </c-h2> <c-p marginBottom0> You can nominate a new provider at the start of the next financial year. </c-p> </c-alert> </template> <script lang="ts"> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-ts/Alert.vue"; import H2 from "@govtnz/ds/build/vue-ts/H2.vue"; import P from "@govtnz/ds/build/vue-ts/P.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-p": P } }; </script>

HTML <div role="note" aria-labelledby="heading1"> <div class="g-alert g-alert--info"> <h2 class="g-heading" id="heading1"> Note: Nominations are currently closed </h2> <p class="g-body g-body-marginBottom0"> You can nominate a new provider at the start of the next financial year. </p> </div> </div> <div role="note"> <div class="g-alert g-alert--info"> <h2 class="g-heading" id="heading1"> Note: Nominations are currently closed </h2> <p class="g-body g-body-marginBottom0"> You can nominate a new provider at the start of the next financial year. </p> </div> </div>

twig-embed{% embed "Alert.html.twig" with {'level':'info', 'headingId':'heading1'} only %}{% block children %}{% embed "H2.html.twig" with {'id':'heading1', 'children':'Note: Nominations are currently closed'} only %}{% endembed %} {% embed "P.html.twig" with {'marginBottom0':'true', 'children':'You can nominate a new provider at the start of the next financial year.'} only %}{% endembed %}{% endblock %}{% endembed %}

Information alert: Live

Open this example in a new window

Code

React with Styled Components (JavaScript)import React from "react"; import Alert from "@govtnz/ds/build/react-js-styled-components/Alert"; import H2 from "@govtnz/ds/build/react-js-styled-components/H2"; import P from "@govtnz/ds/build/react-js-styled-components/P"; export default () => ( <Alert mode="live" level="info" headingId="heading1"> <H2 id="heading1">Note: There are only 3 spaces remaining</H2> <P marginBottom0> Complete your order to reserve your place on the course. </P> </Alert> );

React with Styled Components (TypeScript)import React from "react"; import Alert from "@govtnz/ds/build/react-ts-styled-components/Alert"; import H2 from "@govtnz/ds/build/react-ts-styled-components/H2"; import P from "@govtnz/ds/build/react-ts-styled-components/P"; export default () => ( <Alert mode="live" level="info" headingId="heading1"> <H2 id="heading1">Note: There are only 3 spaces remaining</H2> <P marginBottom0> Complete your order to reserve your place on the course. </P> </Alert> );

Vue (JavaScript)<template> <c-alert mode="live" level="info" headingId="heading1"> <c-h2 id="heading1"> Note: There are only 3 spaces remaining </c-h2> <c-p marginBottom0> Complete your order to reserve your place on the course. </c-p> </c-alert> </template> <script> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-js/Alert.vue"; import H2 from "@govtnz/ds/build/vue-js/H2.vue"; import P from "@govtnz/ds/build/vue-js/P.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-p": P } }; </script>

Vue (TypeScript)<template> <c-alert mode="live" level="info" headingId="heading1"> <c-h2 id="heading1"> Note: There are only 3 spaces remaining </c-h2> <c-p marginBottom0> Complete your order to reserve your place on the course. </c-p> </c-alert> </template> <script lang="ts"> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-ts/Alert.vue"; import H2 from "@govtnz/ds/build/vue-ts/H2.vue"; import P from "@govtnz/ds/build/vue-ts/P.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-p": P } }; </script>

HTML <div role="note" aria-labelledby="heading1" aria-live="polite" aria-atomic="true" > <div class="g-alert g-alert--info"> <h2 class="g-heading" id="heading1"> Note: There are only 3 spaces remaining </h2> <p class="g-body g-body-marginBottom0"> Complete your order to reserve your place on the course. </p> </div> </div> <div role="note"> <div class="g-alert g-alert--info"> <h2 class="g-heading" id="heading1"> Note: There are only 3 spaces remaining </h2> <p class="g-body g-body-marginBottom0"> Complete your order to reserve your place on the course. </p> </div> </div>

twig-embed{% embed "Alert.html.twig" with {'mode':'live', 'level':'info', 'headingId':'heading1'} only %}{% block children %}{% embed "H2.html.twig" with {'id':'heading1', 'children':'Note: There are only 3 spaces remaining'} only %}{% endembed %} {% embed "P.html.twig" with {'marginBottom0':'true', 'children':'Complete your order to reserve your place on the course.'} only %}{% endembed %}{% endblock %}{% endembed %}

Warning

Use warning alerts to tell users something urgent. Only use this alert if the information will help users avoid a problem.

Warning alert: Static

Open this example in a new window

Code

React with Styled Components (JavaScript)import React from "react"; import Alert from "@govtnz/ds/build/react-js-styled-components/Alert"; import H2 from "@govtnz/ds/build/react-js-styled-components/H2"; import P from "@govtnz/ds/build/react-js-styled-components/P"; export default () => ( <Alert level="warning" headingId="heading2"> <H2 id="heading2">Warning: Your subscription will expire soon</H2> <P marginBottom0> You’ll need to renew your subscription to keep using the service. </P> </Alert> );

React with Styled Components (TypeScript)import React from "react"; import Alert from "@govtnz/ds/build/react-ts-styled-components/Alert"; import H2 from "@govtnz/ds/build/react-ts-styled-components/H2"; import P from "@govtnz/ds/build/react-ts-styled-components/P"; export default () => ( <Alert level="warning" headingId="heading2"> <H2 id="heading2">Warning: Your subscription will expire soon</H2> <P marginBottom0> You’ll need to renew your subscription to keep using the service. </P> </Alert> );

Vue (JavaScript)<template> <c-alert level="warning" headingId="heading2"> <c-h2 id="heading2"> Warning: Your subscription will expire soon </c-h2> <c-p marginBottom0> You’ll need to renew your subscription to keep using the service. </c-p> </c-alert> </template> <script> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-js/Alert.vue"; import H2 from "@govtnz/ds/build/vue-js/H2.vue"; import P from "@govtnz/ds/build/vue-js/P.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-p": P } }; </script>

Vue (TypeScript)<template> <c-alert level="warning" headingId="heading2"> <c-h2 id="heading2"> Warning: Your subscription will expire soon </c-h2> <c-p marginBottom0> You’ll need to renew your subscription to keep using the service. </c-p> </c-alert> </template> <script lang="ts"> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-ts/Alert.vue"; import H2 from "@govtnz/ds/build/vue-ts/H2.vue"; import P from "@govtnz/ds/build/vue-ts/P.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-p": P } }; </script>

HTML <div role="note" aria-labelledby="heading2"> <div class="g-alert g-alert--warning"> <h2 class="g-heading" id="heading2"> Warning: Your subscription will expire soon </h2> <p class="g-body g-body-marginBottom0"> You’ll need to renew your subscription to keep using the service. </p> </div> </div> <div role="note"> <div class="g-alert g-alert--warning"> <h2 class="g-heading" id="heading2"> Warning: Your subscription will expire soon </h2> <p class="g-body g-body-marginBottom0"> You’ll need to renew your subscription to keep using the service. </p> </div> </div>

twig-embed{% embed "Alert.html.twig" with {'level':'warning', 'headingId':'heading2'} only %}{% block children %}{% embed "H2.html.twig" with {'id':'heading2', 'children':'Warning: Your subscription will expire soon'} only %}{% endembed %} {% embed "P.html.twig" with {'marginBottom0':'true', 'children':'You’ll need to renew your subscription to keep using the service.'} only %}{% endembed %}{% endblock %}{% endembed %}

Warning alert: Live

Open this example in a new window

Code

Vue (JavaScript)<template> <c-alert mode="live" level="warning" headingId="heading1"> <c-h2 id="heading1"> Warning: The option you’ve selected is for people aged 65 or over only </c-h2> <c-p marginBottom0> You’ll need to provide evidence of your date of birth when you submit your application. </c-p> </c-alert> </template> <script> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-js/Alert.vue"; import H2 from "@govtnz/ds/build/vue-js/H2.vue"; import P from "@govtnz/ds/build/vue-js/P.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-p": P } }; </script>

Vue (TypeScript)<template> <c-alert mode="live" level="warning" headingId="heading1"> <c-h2 id="heading1"> Warning: The option you’ve selected is for people aged 65 or over only </c-h2> <c-p marginBottom0> You’ll need to provide evidence of your date of birth when you submit your application. </c-p> </c-alert> </template> <script lang="ts"> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-ts/Alert.vue"; import H2 from "@govtnz/ds/build/vue-ts/H2.vue"; import P from "@govtnz/ds/build/vue-ts/P.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-p": P } }; </script>

HTML <div role="note" aria-labelledby="heading1" aria-live="polite" aria-atomic="true" > <div class="g-alert g-alert--warning"> <h2 class="g-heading" id="heading1"> Warning: The option you’ve selected is for people aged 65 or over only </h2> <p class="g-body g-body-marginBottom0"> You’ll need to provide evidence of your date of birth when you submit your application. </p> </div> </div> <div role="note" aria-live="polite" aria-atomic="true"> <div class="g-alert g-alert--warning"> <h2 class="g-heading" id="heading1"> Warning: The option you’ve selected is for people aged 65 or over only </h2> <p class="g-body g-body-marginBottom0"> You’ll need to provide evidence of your date of birth when you submit your application. </p> </div> </div>

twig-embed{% embed "Alert.html.twig" with {'mode':'live', 'level':'warning', 'headingId':'heading1'} only %}{% block children %}{% embed "H2.html.twig" with {'id':'heading1', 'children':'Warning: The option you’ve selected is for people aged 65 or over only'} only %}{% endembed %} {% embed "P.html.twig" with {'marginBottom0':'true', 'children':'You’ll need to provide evidence of your date of birth when you submit your application.'} only %}{% endembed %}{% endblock %}{% endembed %}

Success

Use success alerts to notify users that a form submission has completed successfully.

Success alerts are always static, as they are included as part of a new page or view, and remain unchanged until the user initiates a change of context.

To orient screen reader users and others to the alert, the Design System user must ensure that when the page or view first loads:

focus is moved to the alert (the alert container is preset with tabindex=”-1” to make it programmatically focusable)
the document’s title starts with "Success:".

Success alert

Open this example in a new window

Code

React with Styled Components (JavaScript)import React from "react"; import Alert from "@govtnz/ds/build/react-js-styled-components/Alert"; import H2 from "@govtnz/ds/build/react-js-styled-components/H2"; import P from "@govtnz/ds/build/react-js-styled-components/P"; export default () => ( <Alert level="success" headingId="heading3"> <H2 id="heading3">Success: Your account has been activated</H2> <P marginBottom0>You can now access all features of the service.</P> </Alert> );

React with Styled Components (TypeScript)import React from "react"; import Alert from "@govtnz/ds/build/react-ts-styled-components/Alert"; import H2 from "@govtnz/ds/build/react-ts-styled-components/H2"; import P from "@govtnz/ds/build/react-ts-styled-components/P"; export default () => ( <Alert level="success" headingId="heading3"> <H2 id="heading3">Success: Your account has been activated</H2> <P marginBottom0>You can now access all features of the service.</P> </Alert> );

Vue (JavaScript)<template> <c-alert level="success" headingId="heading3"> <c-h2 id="heading3"> Success: Your account has been activated </c-h2> <c-p marginBottom0> You can now access all features of the service. </c-p> </c-alert> </template> <script> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-js/Alert.vue"; import H2 from "@govtnz/ds/build/vue-js/H2.vue"; import P from "@govtnz/ds/build/vue-js/P.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-p": P } }; </script>

Vue (TypeScript)<template> <c-alert level="success" headingId="heading3"> <c-h2 id="heading3"> Success: Your account has been activated </c-h2> <c-p marginBottom0> You can now access all features of the service. </c-p> </c-alert> </template> <script lang="ts"> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-ts/Alert.vue"; import H2 from "@govtnz/ds/build/vue-ts/H2.vue"; import P from "@govtnz/ds/build/vue-ts/P.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-p": P } }; </script>

HTML <div role="note" aria-labelledby="heading3" tabindex="-1"> <div class="g-alert g-alert--success"> <h2 class="g-heading" id="heading3"> Success: Your account has been activated </h2> <p class="g-body g-body-marginBottom0"> You can now access all features of the service. </p> </div> </div> <div role="note" tabindex="-1"> <div class="g-alert g-alert--success"> <h2 class="g-heading" id="heading3"> Success: Your account has been activated </h2> <p class="g-body g-body-marginBottom0"> You can now access all features of the service. </p> </div> </div>

twig-embed{% embed "Alert.html.twig" with {'level':'success', 'headingId':'heading3'} only %}{% block children %}{% embed "H2.html.twig" with {'id':'heading3', 'children':'Success: Your account has been activated'} only %}{% endembed %} {% embed "P.html.twig" with {'marginBottom0':'true', 'children':'You can now access all features of the service.'} only %}{% endembed %}{% endblock %}{% endembed %}

Error summary

Use the error summary alert to inform users of every error they need to correct in a form before they can move on to the next step or complete their task.

Form errors must be presented using:

the error summary alert
individual error messages next to each form field with an error.

The error summary should be added at the top of the page above the form and link to each form field that has an error.

Error summary alerts are always static, as they are included as part of a new page or view, and remain unchanged until the user initiates a change of context.

To orient screen reader users and others to the alert, the Design System user must ensure that when the page or view first loads:

focus is moved to the alert (the alert container is preset with tabindex=”-1” to make it programmatically focusable)
the document’s title starts with "Error:".

Error summary alert

Open this example in a new window

Code

Mustache / Handlebars// Developer note: ensure your ".mustache" files are imported as plain text. In Webpack you might use https://github.com/webpack-contrib/raw-loader import Mustache from "mustache"; import Alert from "@govtnz/ds/build/mustache/Alert.mustache"; import H2 from "@govtnz/ds/build/mustache/H2.mustache"; import Ul from "@govtnz/ds/build/mustache/Ul.mustache"; import Li from "@govtnz/ds/build/mustache/Li.mustache"; import A from "@govtnz/ds/build/mustache/A.mustache"; // The variables Alert, H2, Ul, Li, A are all strings that are mustache templates. export default `${Mustache.render(Alert, { level: `error`, headingId: `heading4`, children: `${Mustache.render(H2, { id: `heading4`, children: `Error: There’s a problem with the following responses` })}${Mustache.render(Ul, { spacing: true, marginBottom0: ``, children: `${Mustache.render(Li, { children: `${Mustache.render(A, { href: `#form`, children: `First name must not be empty` })}` })}${Mustache.render(Li, { children: `${Mustache.render(A, { href: `#form`, children: `Last name must only include letters a to z, hyphens, spaces and apostrophes` })}` })}${Mustache.render(Li, { children: `${Mustache.render(A, { href: `#form`, children: `Hours worked a week must be between 16 and 99` })}` })}` })}` })}`;

React (JavaScript)import React from "react"; import Alert from "@govtnz/ds/build/react-js/Alert"; import "@govtnz/ds/build/css/Alert.css"; // or @govtnz/ds/build/scss/Alert.scss import H2 from "@govtnz/ds/build/react-js/H2"; import "@govtnz/ds/build/css/H2.css"; // or @govtnz/ds/build/scss/H2.scss import Ul from "@govtnz/ds/build/react-js/Ul"; import "@govtnz/ds/build/css/Ul.css"; // or @govtnz/ds/build/scss/Ul.scss import Li from "@govtnz/ds/build/react-js/Li"; import "@govtnz/ds/build/css/Li.css"; // or @govtnz/ds/build/scss/Li.scss import A from "@govtnz/ds/build/react-js/A"; import "@govtnz/ds/build/css/A.css"; // or @govtnz/ds/build/scss/A.scss export default () => ( <Alert level="error" headingId="heading4"> <H2 id="heading4">Error: There’s a problem with the following responses</H2> <Ul spacing marginBottom0> <Li> <A href="#form">First name must not be empty</A> </Li> <Li> <A href="#form"> Last name must only include letters a to z, hyphens, spaces and apostrophes </A> </Li> <Li> <A href="#form">Hours worked a week must be between 16 and 99</A> </Li> </Ul> </Alert> );

React (TypeScript)import React from "react"; import Alert from "@govtnz/ds/build/react-ts/Alert"; import "@govtnz/ds/build/css/Alert.css"; // or @govtnz/ds/build/scss/Alert.scss import H2 from "@govtnz/ds/build/react-ts/H2"; import "@govtnz/ds/build/css/H2.css"; // or @govtnz/ds/build/scss/H2.scss import Ul from "@govtnz/ds/build/react-ts/Ul"; import "@govtnz/ds/build/css/Ul.css"; // or @govtnz/ds/build/scss/Ul.scss import Li from "@govtnz/ds/build/react-ts/Li"; import "@govtnz/ds/build/css/Li.css"; // or @govtnz/ds/build/scss/Li.scss import A from "@govtnz/ds/build/react-ts/A"; import "@govtnz/ds/build/css/A.css"; // or @govtnz/ds/build/scss/A.scss export default () => ( <Alert level="error" headingId="heading4"> <H2 id="heading4">Error: There’s a problem with the following responses</H2> <Ul spacing marginBottom0> <Li> <A href="#form">First name must not be empty</A> </Li> <Li> <A href="#form"> Last name must only include letters a to z, hyphens, spaces and apostrophes </A> </Li> <Li> <A href="#form">Hours worked a week must be between 16 and 99</A> </Li> </Ul> </Alert> );

React with Styled Components (JavaScript)import React from "react"; import Alert from "@govtnz/ds/build/react-js-styled-components/Alert"; import H2 from "@govtnz/ds/build/react-js-styled-components/H2"; import Ul from "@govtnz/ds/build/react-js-styled-components/Ul"; import Li from "@govtnz/ds/build/react-js-styled-components/Li"; import A from "@govtnz/ds/build/react-js-styled-components/A"; export default () => ( <Alert level="error" headingId="heading4"> <H2 id="heading4">Error: There’s a problem with the following responses</H2> <Ul spacing marginBottom0> <Li> <A href="#form">First name must not be empty</A> </Li> <Li> <A href="#form"> Last name must only include letters a to z, hyphens, spaces and apostrophes </A> </Li> <Li> <A href="#form">Hours worked a week must be between 16 and 99</A> </Li> </Ul> </Alert> );

React with Styled Components (TypeScript)import React from "react"; import Alert from "@govtnz/ds/build/react-ts-styled-components/Alert"; import H2 from "@govtnz/ds/build/react-ts-styled-components/H2"; import Ul from "@govtnz/ds/build/react-ts-styled-components/Ul"; import Li from "@govtnz/ds/build/react-ts-styled-components/Li"; import A from "@govtnz/ds/build/react-ts-styled-components/A"; export default () => ( <Alert level="error" headingId="heading4"> <H2 id="heading4">Error: There’s a problem with the following responses</H2> <Ul spacing marginBottom0> <Li> <A href="#form">First name must not be empty</A> </Li> <Li> <A href="#form"> Last name must only include letters a to z, hyphens, spaces and apostrophes </A> </Li> <Li> <A href="#form">Hours worked a week must be between 16 and 99</A> </Li> </Ul> </Alert> );

Vue (JavaScript)<template> <c-alert level="error" headingId="heading4"> <c-h2 id="heading4"> Error: There’s a problem with the following responses </c-h2> <c-ul spacing marginBottom0> <c-li> <c-a href="#form"> First name must not be empty </c-a> </c-li> <c-li> <c-a href="#form"> Last name must only include letters a to z, hyphens, spaces and apostrophes </c-a> </c-li> <c-li> <c-a href="#form"> Hours worked a week must be between 16 and 99 </c-a> </c-li> </c-ul> </c-alert> </template> <script> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-js/Alert.vue"; import H2 from "@govtnz/ds/build/vue-js/H2.vue"; import Ul from "@govtnz/ds/build/vue-js/Ul.vue"; import Li from "@govtnz/ds/build/vue-js/Li.vue"; import A from "@govtnz/ds/build/vue-js/A.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-ul": Ul, "c-li": Li, "c-a": A } }; </script>

Vue (TypeScript)<template> <c-alert level="error" headingId="heading4"> <c-h2 id="heading4"> Error: There’s a problem with the following responses </c-h2> <c-ul spacing marginBottom0> <c-li> <c-a href="#form"> First name must not be empty </c-a> </c-li> <c-li> <c-a href="#form"> Last name must only include letters a to z, hyphens, spaces and apostrophes </c-a> </c-li> <c-li> <c-a href="#form"> Hours worked a week must be between 16 and 99 </c-a> </c-li> </c-ul> </c-alert> </template> <script lang="ts"> import Vue from "vue"; import Alert from "@govtnz/ds/build/vue-ts/Alert.vue"; import H2 from "@govtnz/ds/build/vue-ts/H2.vue"; import Ul from "@govtnz/ds/build/vue-ts/Ul.vue"; import Li from "@govtnz/ds/build/vue-ts/Li.vue"; import A from "@govtnz/ds/build/vue-ts/A.vue"; export default { components: { "c-alert": Alert, "c-h2": H2, "c-ul": Ul, "c-li": Li, "c-a": A } }; </script>

HTML <div role="note" aria-labelledby="heading4" tabindex="-1"> <div class="g-alert g-alert--error"> <h2 class="g-heading" id="heading4"> Error: There’s a problem with the following responses </h2> <ul class="g-ul g-ul--spacing g-ul--mb-0"> <li><a class="g-link" href="#form"> First name must not be empty </a></li> <li> <a class="g-link" href="#form"> Last name must only include letters a to z, hyphens, spaces and apostrophes </a> </li> <li> <a class="g-link" href="#form"> Hours worked a week must be between 16 and 99 </a> </li> </ul> </div> </div> <div role="note" tabindex="-1"> <div class="g-alert g-alert--error"> <h2 class="g-heading" id="heading4"> Error: There’s a problem with the following responses </h2> <ul class="g-ul g-ul--spacing g-ul--mb-0"> <li><a class="g-link" href="#form"> First name must not be empty </a></li> <li> <a class="g-link" href="#form"> Last name must only include letters a to z, hyphens, spaces and apostrophes </a> </li> <li> <a class="g-link" href="#form"> Hours worked a week must be between 16 and 99 </a> </li> </ul> </div> </div>

twig-embed{% embed "Alert.html.twig" with {'level':'error', 'headingId':'heading4'} only %}{% block children %}{% embed "H2.html.twig" with {'id':'heading4', 'children':'Error: There’s a problem with the following responses'} only %}{% endembed %} {% embed "Ul.html.twig" with {'spacing':'true', 'marginBottom0':'true'} only %}{% block children %}{% embed "Li.html.twig" %}{% block children %}{% embed "A.html.twig" with {'href':'#form', 'children':'First name must not be empty'} only %}{% endembed %}{% endblock %}{% endembed %} {% embed "Li.html.twig" %}{% block children %}{% embed "A.html.twig" with {'href':'#form', 'children':'Last name must only include letters a to z, hyphens, spaces and apostrophes'} only %}{% endembed %}{% endblock %}{% endembed %} {% embed "Li.html.twig" %}{% block children %}{% embed "A.html.twig" with {'href':'#form', 'children':'Hours worked a week must be between 16 and 99'} only %}{% endembed %}{% endblock %}{% endembed %}{% endblock %}{% endembed %}{% endblock %}{% endembed %}

Error messages

Specific error messages must be provided for specific error states. Style error messages as shown in the ‘Error messages’ sections of the guidance for the following form components:

Credit

Guidance, original HTML and CSS derived from GOV.UK Design System.

Guidance for the page alerts component derived from the Australian Government Design System.

Get in touch

If you’ve got a question, idea, or suggestion, email the Design System (DS) team at info@digital.govt.nz, use our NZGDS Slack app, or discuss Page alerts on 'GitHub issues'.