Error-summary

Mostrar parámetros

Parámetros Nunjucks del componente: "Error-summary"

              params:
- name: titleText
  type: string
  required: true
  description: If `titleHtml` is set, this is not required. Text to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
- name: titleHtml
  type: string
  required: true
  description: If `titleText` is set, this is not required. HTML to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
- name: headingLevel
  type: number
  required: false
  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
- name: descriptionText
  type: string
  required: false
  description: Text to use for the description of the errors. If you set `descriptionHtml`, the component will ignore `descriptionText`.
- name: descriptionHtml
  type: string
  required: false
  description: HTML to use for the description of the errors. If you set this option, the component will ignore `descriptionText`.
- name: errorList
  type: array
  required: true
  description: Contains an array of error link items and all their available arguments.
  params:
  - name: href
    type: string
    required: false
    description: Href attribute for the error link item. If provided item will be an anchor.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for the error link item. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML for the error link item. If `html` is provided, the `text` argument will be ignored.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the error link anchor.
- name: classes
  type: string
  required: false
  description: Classes to add to the error-summary container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the error-summary container.

Por defecto #

Problemas encontrados

El campo de Nombre no puede estar vacío.
El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.

Mostrar código

Contenido

Nunjucks macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "El campo de Nombre no puede estar vacío.",
      "href": "#example-error-1"
    },
    {
      "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
      "href": "#example-error-2"
    }
  ]
}) }}

HTML

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
  <h2 class="mb-base font-bold" id="error-summary-title">
    Problemas encontrados
  </h2>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        <a href="#example-error-1" class="c-link c-link--alert inline-block pb-sm">El campo de Nombre no puede estar vacío.</a>
      </li>
      <li>
        <a href="#example-error-2" class="c-link c-link--alert inline-block pb-sm">El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

Con encabezado de nivel 3 #

Título con h3

El campo de Nombre no puede estar vacío.
El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.

Mostrar código

Contenido

Nunjucks macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "Título con h3",
  "headingLevel": 3,
  "errorList": [
    {
      "text": "El campo de Nombre no puede estar vacío.",
      "href": "#example-error-1"
    },
    {
      "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
      "href": "#example-error-2"
    }
  ]
}) }}

HTML

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
  <h3 class="mb-base font-bold" id="error-summary-title">
    Título con h3
  </h3>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        <a href="#example-error-1" class="c-link c-link--alert inline-block pb-sm">El campo de Nombre no puede estar vacío.</a>
      </li>
      <li>
        <a href="#example-error-2" class="c-link c-link--alert inline-block pb-sm">El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

Sin enlaces #

Problemas encontrados

Nombre de usuario o contraseña incorrectos.

Mostrar código

Contenido

Nunjucks macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    }
  ]
}) }}

HTML

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
  <h2 class="mb-base font-bold" id="error-summary-title">
    Problemas encontrados
  </h2>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        Nombre de usuario o contraseña incorrectos.
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

Con y sin enlaces #

Problemas encontrados

Nombre de usuario o contraseña incorrectos.
Acepta los términos del servicio para acceder.

Mostrar código

Contenido

Nunjucks macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    },
    {
      "text": "Acepta los términos del servicio para acceder.",
      "href": "#example-error-1"
    }
  ]
}) }}

HTML

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
  <h2 class="mb-base font-bold" id="error-summary-title">
    Problemas encontrados
  </h2>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        Nombre de usuario o contraseña incorrectos.
      </li>
      <li>
        <a href="#example-error-1" class="c-link c-link--alert inline-block pb-sm">Acepta los términos del servicio para acceder.</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

Con todo #

Problemas encontrados

Por favor, corrige los problemas siguientes.

Nombre de usuario o contraseña incorrectos.
Acepta los términos del servicio para acceder.

Mostrar código

Contenido

Nunjucks macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "descriptionText": "Por favor, corrige los problemas siguientes.",
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    },
    {
      "text": "Acepta los términos del servicio para acceder.",
      "href": "#example-error-1"
    }
  ]
}) }}

HTML

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
  <h2 class="mb-base font-bold" id="error-summary-title">
    Problemas encontrados
  </h2>
  <div>
    <p class="mb-base">
      Por favor, corrige los problemas siguientes.
    </p>
    <ul class="font-semibold text-alert-base">
      <li>
        Nombre de usuario o contraseña incorrectos.
      </li>
      <li>
        <a href="#example-error-1" class="c-link c-link--alert inline-block pb-sm">Acepta los términos del servicio para acceder.</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

Páginas

Todos los componentes

Error-summary

Parámetros Nunjucks del componente: "Error-summary"

Por defecto #

Problemas encontrados

Contenido

Nunjucks macro

HTML

Con encabezado de nivel 3 #

Título con h3

Contenido

Nunjucks macro

HTML

Sin enlaces #

Problemas encontrados

Contenido

Nunjucks macro

HTML

Con y sin enlaces #

Problemas encontrados

Contenido

Nunjucks macro

HTML

Con todo #

Problemas encontrados

Contenido

Nunjucks macro

HTML