Componentes Índice de páginas
Resumen de errores
Avisos
Mensaje de error que aparece al validar los formularios.
Error-summary
Mostrar parámetros
Parámetros del componente
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.
accessibilityCriteria: |
- Must be focused when the page loads
Por defecto #
Mostrar códigodel ejemplo: Por defecto
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">El campo de Nombre no puede estar vacío.</a>
</li>
<li>
<a href="#example-error-2" class="c-link c-link--alert">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 #
Mostrar códigodel ejemplo: Con encabezado de nivel 3
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">El campo de Nombre no puede estar vacío.</a>
</li>
<li>
<a href="#example-error-2" class="c-link c-link--alert">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ódigodel ejemplo: Sin enlaces
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ódigodel ejemplo: Con y sin enlaces
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">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ódigodel ejemplo: Con todo
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">Acepta los términos del servicio para acceder.</a>
</li>
</ul>
</div>
</div>
<!-- /error-summary -->