Checkboxes
Mostrar parámetros
Parámetros del componente
params:
- name: describedBy
type: string
required: false
description: One or more element IDs to add to the input `aria-describedby` attribute without a fieldset, used to provide additional descriptive information for screenreader users.
- name: fieldset
type: object
required: false
description: Options for the fieldset component (e.g. legend).
isComponent: true
- name: hint
type: object
required: false
description: Options for the hint component (e.g. text).
isComponent: true
- name: errorMessage
type: object
required: false
description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
isComponent: true
- name: formGroup
type: object
required: false
description: Options for the form-group wrapper
params:
- name: classes
type: string
required: false
description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: idPrefix
type: string
required: false
description: String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
- name: name
type: string
required: true
description: Name attribute for all checkbox items.
- name: items
type: array
required: true
description: Array of checkbox items objects.
params:
- name: text
type: string
required: true
description: If `html` is set, this is not required. Text to use within each checkbox item label. 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 to use within each checkbox item label. If `html` is provided, the `text` argument will be ignored.
- name: id
type: string
required: false
description: Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied.
- name: name
type: string
required: true
description: Specific name for the checkbox item. If omitted, then component global `name` string will be applied.
- name: value
type: string
required: true
description: Value for the checkbox input.
- name: label
type: object
required: false
description: Provide attributes and classes to each checkbox item label.
isComponent: true
- name: hint
type: object
required: false
description: Provide hint to each checkbox item.
isComponent: true
- name: checked
type: boolean
required: false
description: If true, checkbox will be checked.
- name: isIndeterminate
type: boolean
required: false
description: If true, the checkbox will have an additional indeterminate state to show a partial true.
- name: indeterminateChecked
type: boolean
required: false
description: If true, the checkbox will have an indeterminate checked initial state. This will override isChecked value.
- name: conditional
type: boolean
required: false
description: If true, content provided will be revealed when the item is checked.
- name: conditional.html
type: string
required: false
description: Provide content for the conditional reveal.
- name: disabled
type: boolean
required: false
description: If true, checkbox will be disabled.
- name: classes
type: string
required: false
description: Classes to add to the item.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the checkbox input tag.
- name: hasDividers
type: boolean
required: false
description: With hasDividers equal to true, the items have an horizontal border to visually separate items.
- name: classes
type: string
required: false
description: Classes to add to the checkboxes container.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the anchor tag.
Por defecto #
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "default",
"name": "default",
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?"
}
},
"hint": {
"text": "Si lo deseas puedes seleccionar varios elementos."
},
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico"
},
{
"value": "correo-postal",
"text": "Correo postal"
},
{
"value": "telefono",
"text": "Teléfono"
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="default-hint">
<legend class="font-bold">
¿Cómo prefieres que te contactemos?
</legend>
<!-- hint -->
<p id="default-hint" class="block text-neutral-dark">Si lo deseas puedes seleccionar varios elementos.</p>
<!-- /hint -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default" name="default" type="checkbox" value="correo-electronico" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="default">Correo electrónico</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-2" name="default" type="checkbox" value="correo-postal" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="default-2">Correo postal</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-3" name="default" type="checkbox" value="telefono" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="default-3">Teléfono</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con id y name #
Mostrar códigodel ejemplo: Con id y name
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "with-id-and-name",
"name": "with-id-and-name",
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?"
}
},
"hint": {
"text": "Si lo deseas puedes seleccionar varios elementos."
},
"items": [
{
"name": "correo-electronico",
"id": "correo-electronico-id",
"value": "correo-electronico",
"text": "Correo electrónico"
},
{
"name": "correo-postal",
"id": "correo-postal-id",
"value": "correo-postal",
"text": "Correo postal"
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="with-id-and-name-hint">
<legend class="font-bold">
¿Cómo prefieres que te contactemos?
</legend>
<!-- hint -->
<p id="with-id-and-name-hint" class="block text-neutral-dark">Si lo deseas puedes seleccionar varios elementos.</p>
<!-- /hint -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="correo-electronico-id" name="correo-electronico" type="checkbox" value="correo-electronico" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="correo-electronico-id">Correo electrónico</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="correo-postal-id" name="correo-postal" type="checkbox" value="correo-postal" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="correo-postal-id">Correo postal</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con pistas en los items #
Mostrar códigodel ejemplo: Con pistas en los items
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "hints-on-items",
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?",
"isPageHeading": true
}
},
"items": [
{
"name": "correo-electronico",
"id": "correo-electronico-a",
"value": "desy-correo-electronico",
"text": "Correo electrónico",
"hint": {
"text": "Asegúrate de que el correo no llega a la bandeja de spam."
}
},
{
"name": "correo-postal",
"id": "desy-correo-postal-a",
"value": "desy-correo-postal-a",
"text": "Correo postal",
"hint": {
"text": "Asegúrate de haber introducido la dirección postal correctamente."
}
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
<legend class="font-bold">
<h1>
¿Cómo prefieres que te contactemos?
</h1>
</legend>
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="correo-electronico-a" name="correo-electronico" type="checkbox" value="desy-correo-electronico" aria-describedby=" correo-electronico-a-item-hint">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="correo-electronico-a">Correo electrónico</label>
<!-- /label -->
<!-- hint -->
<p id="correo-electronico-a-item-hint" class="block text-neutral-dark">Asegúrate de que el correo no llega a la bandeja de spam.</p>
<!-- /hint -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="desy-correo-postal-a" name="correo-postal" type="checkbox" value="desy-correo-postal-a" aria-describedby=" desy-correo-postal-a-item-hint">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="desy-correo-postal-a">Correo postal</label>
<!-- /label -->
<!-- hint -->
<p id="desy-correo-postal-a-item-hint" class="block text-neutral-dark">Asegúrate de haber introducido la dirección postal correctamente.</p>
<!-- /hint -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con líneas divisorias #
Mostrar códigodel ejemplo: Con líneas divisorias
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "has-dividers",
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?"
}
},
"hint": {
"text": "Si lo deseas puedes seleccionar varios elementos."
},
"hasDividers": true,
"items": [
{
"name": "correo-electronico",
"id": "correo-electronico-b",
"value": "desy-correo-electronico",
"text": "Correo electrónico"
},
{
"name": "correo-postal",
"id": "desy-correo-postal-b",
"value": "desy-correo-postal-b",
"text": "Correo postal",
"hint": {
"text": "Asegúrate de haber introducido la dirección postal correctamente."
}
},
{
"name": "telefono",
"id": "telefono-b",
"value": "telefono",
"text": "Teléfono",
"checked": true,
"conditional": {
"html": " <!-- input -->\n<div class=\"c-form-group\">\n <!-- label -->\n <label class=\"block\" for=\"telefono-1\">Número de teléfono</label>\n <!-- /label -->\n <input class=\"c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base\" id=\"telefono-1\" name=\"telefono-name-1\" type=\"text\">\n</div>\n<!-- /input -->\n"
}
},
{
"name": "correo-postal",
"id": "desy-correo-postal-c",
"value": "desy-correo-postal-c",
"text": "Correo postal",
"hint": {
"text": "Asegúrate de haber introducido la dirección postal correctamente."
}
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="has-dividers-hint">
<legend class="font-bold">
¿Cómo prefieres que te contactemos?
</legend>
<!-- hint -->
<p id="has-dividers-hint" class="block text-neutral-dark">Si lo deseas puedes seleccionar varios elementos.</p>
<!-- /hint -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" border-t border-b border-neutral-base -mb-px c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="correo-electronico-b" name="correo-electronico" type="checkbox" value="desy-correo-electronico" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="correo-electronico-b">Correo electrónico</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" border-t border-b border-neutral-base -mb-px c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="desy-correo-postal-b" name="correo-postal" type="checkbox" value="desy-correo-postal-b" aria-describedby=" desy-correo-postal-b-item-hint">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="desy-correo-postal-b">Correo postal</label>
<!-- /label -->
<!-- hint -->
<p id="desy-correo-postal-b-item-hint" class="block text-neutral-dark">Asegúrate de haber introducido la dirección postal correctamente.</p>
<!-- /hint -->
</div>
</div>
</div>
<div class=" border-t border-b border-neutral-base -mb-px c-checkboxes__conditional c-checkboxes__conditional-active">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="telefono-b" name="telefono" type="checkbox" value="telefono" checked aria-controls="conditional-telefono-b" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="telefono-b">Teléfono</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-telefono-b">
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="telefono-1">Número de teléfono</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="telefono-1" name="telefono-name-1" type="text">
</div>
<!-- /input -->
</div>
</div>
<div class=" border-t border-b border-neutral-base -mb-px c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="desy-correo-postal-c" name="correo-postal" type="checkbox" value="desy-correo-postal-c" aria-describedby=" desy-correo-postal-c-item-hint">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="desy-correo-postal-c">Correo postal</label>
<!-- /label -->
<!-- hint -->
<p id="desy-correo-postal-c-item-hint" class="block text-neutral-dark">Asegúrate de haber introducido la dirección postal correctamente.</p>
<!-- /hint -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con clases de css aplicadas #
Los parámetros classes
nos permiten aplicar clases de Tailwind CSS a nuestro componente.
Mostrar códigodel ejemplo: Con clases de css aplicadas
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "classes",
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?"
}
},
"items": [
{
"name": "correo-electronico",
"id": "correo-electronico-c",
"value": "desy-correo-electronico",
"text": "Correo electrónico",
"hint": {
"text": "Asegúrate de que el correo no llega a la bandeja de spam."
},
"classes": "bg-primary-light"
},
{
"name": "correo-postal",
"id": "desy-correo-postal-d",
"value": "desy-correo-postal-d",
"text": "Correo postal",
"hint": {
"text": "Asegúrate de haber introducido la dirección postal correctamente."
},
"classes": "bg-neutral-lighter"
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
<legend class="font-bold">
¿Cómo prefieres que te contactemos?
</legend>
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" bg-primary-light c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="correo-electronico-c" name="correo-electronico" type="checkbox" value="desy-correo-electronico" aria-describedby=" correo-electronico-c-item-hint">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="correo-electronico-c">Correo electrónico</label>
<!-- /label -->
<!-- hint -->
<p id="correo-electronico-c-item-hint" class="block text-neutral-dark">Asegúrate de que el correo no llega a la bandeja de spam.</p>
<!-- /hint -->
</div>
</div>
</div>
<div class=" bg-neutral-lighter c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="desy-correo-postal-d" name="correo-postal" type="checkbox" value="desy-correo-postal-d" aria-describedby=" desy-correo-postal-d-item-hint">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="desy-correo-postal-d">Correo postal</label>
<!-- /label -->
<!-- hint -->
<p id="desy-correo-postal-d-item-hint" class="block text-neutral-dark">Asegúrate de haber introducido la dirección postal correctamente.</p>
<!-- /hint -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con item deshabilitado #
Mostrar códigodel ejemplo: Con item deshabilitado
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "disabled-item",
"name": "colours",
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico"
},
{
"value": "correo-postal",
"text": "Correo postal",
"disabled": true,
"checked": true
},
{
"value": "telefono",
"text": "Teléfono",
"disabled": true
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="disabled-item" name="colours" type="checkbox" value="correo-electronico" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="disabled-item">Correo electrónico</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-active">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="disabled-item-2" name="colours" type="checkbox" value="correo-postal" checked disabled aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="disabled-item-2">Correo postal</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="disabled-item-3" name="colours" type="checkbox" value="telefono" disabled aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="disabled-item-3">Teléfono</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<!-- /checkboxes -->
Con un legend como encabezado #
Usa el parámetro "heading"
para añadir un encabezado asociado al componente. Usa el parámetro "headingLevel"
para establecer el nivel del encabezado. Por ejemplo: "headingLevel": 3
creará un encabezado <h3>
.
Mostrar códigodel ejemplo: Con un legend como encabezado
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "legend-as-page-heading",
"name": "legend-as-page-heading",
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?",
"classes": "c-h2",
"isPageHeading": true
},
"headingLevel": 2
},
"hint": {
"text": "Si lo deseas puedes seleccionar varios elementos."
},
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico"
},
{
"value": "correp-postal",
"text": "Correo postal"
},
{
"value": "telefono",
"text": "Teléfono"
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="legend-as-page-heading-hint">
<legend class="c-h2">
<h2>
¿Cómo prefieres que te contactemos?
</h2>
</legend>
<!-- hint -->
<p id="legend-as-page-heading-hint" class="block text-neutral-dark">Si lo deseas puedes seleccionar varios elementos.</p>
<!-- /hint -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="legend-as-page-heading" name="legend-as-page-heading" type="checkbox" value="correo-electronico" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="legend-as-page-heading">Correo electrónico</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="legend-as-page-heading-2" name="legend-as-page-heading" type="checkbox" value="correp-postal" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="legend-as-page-heading-2">Correo postal</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="legend-as-page-heading-3" name="legend-as-page-heading" type="checkbox" value="telefono" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="legend-as-page-heading-3">Teléfono</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con un legend del tamaño de un encabezado h2 #
Mostrar códigodel ejemplo: Con un legend del tamaño de un encabezado h2
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "medium-legend",
"name": "medium-legend",
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?",
"classes": "c-h2"
}
},
"hint": {
"text": "Si lo deseas puedes seleccionar varios elementos."
},
"errorMessage": {
"text": "Error: Tienes que seleccionar al menos una opción"
},
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico"
},
{
"value": "correp-postal",
"text": "Correo postal"
},
{
"value": "telefono",
"text": "Teléfono"
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="medium-legend-hint medium-legend-error" aria-errormessage="medium-legend-error">
<legend class="c-h2">
¿Cómo prefieres que te contactemos?
</legend>
<!-- hint -->
<p id="medium-legend-hint" class="block text-neutral-dark">Si lo deseas puedes seleccionar varios elementos.</p>
<!-- /hint -->
<!-- error-message -->
<p id="medium-legend-error" class="block font-semibold text-alert-base">
<span class="sr-only">Error:</span>Error: Tienes que seleccionar al menos una opción
</p>
<!-- /error-message -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="medium-legend" name="medium-legend" type="checkbox" value="correo-electronico" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="medium-legend">Correo electrónico</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="medium-legend-2" name="medium-legend" type="checkbox" value="correp-postal" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="medium-legend-2">Correo postal</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="medium-legend-3" name="medium-legend" type="checkbox" value="telefono" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="medium-legend-3">Teléfono</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Sin fieldset #
Mostrar códigodel ejemplo: Sin fieldset
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "without-fieldset",
"name": "without-fieldset",
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico"
},
{
"value": "correp-postal",
"text": "Correo postal"
},
{
"value": "telefono",
"text": "Teléfono"
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset" name="without-fieldset" type="checkbox" value="correo-electronico" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="without-fieldset">Correo electrónico</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-2" name="without-fieldset" type="checkbox" value="correp-postal" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="without-fieldset-2">Correo postal</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-3" name="without-fieldset" type="checkbox" value="telefono" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="without-fieldset-3">Teléfono</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<!-- /checkboxes -->
Con una sóla opción usando 'aria-describedby' en el input #
Error:Error: Por favor, debes aceptar los términos y condiciones
Mostrar códigodel ejemplo: Con una sóla opción usando 'aria-describedby' en el input
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "describedby",
"name": "describedby",
"errorMessage": {
"text": "Error: Por favor, debes aceptar los términos y condiciones"
},
"items": [
{
"value": "acepto",
"html": "Acepto los <a href=\"#\" target=\"_blank\" class=\"c-link\" title=\"Se abre en ventana nueva del navegador\">términos y condiciones</a>"
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- error-message -->
<p id="describedby-error" class="block font-semibold text-alert-base">
<span class="sr-only">Error:</span>Error: Por favor, debes aceptar los términos y condiciones
</p>
<!-- /error-message -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="describedby" name="describedby" type="checkbox" value="acepto" aria-describedby="describedby-error " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="describedby">Acepto los <a href="#" target="_blank" class="c-link" title="Se abre en ventana nueva del navegador">términos y condiciones</a></label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<!-- /checkboxes -->
Con una sóla opción (y pista) usando 'aria-describedby' en el input #
Error:Error: Por favor, debes aceptar los términos y condiciones
Puedes visualizarlos en ventana nueva del navegador
Mostrar códigodel ejemplo: Con una sóla opción (y pista) usando 'aria-describedby' en el input
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"name": "t-and-c-with-hint",
"errorMessage": {
"text": "Error: Por favor, debes aceptar los términos y condiciones"
},
"items": [
{
"value": "acepto",
"html": "Acepto los <a href=\"#\" target=\"_blank\" class=\"c-link\" title=\"Se abre en ventana nueva del navegador\">términos y condiciones</a>",
"hint": {
"text": "Puedes visualizarlos en ventana nueva del navegador"
}
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- error-message -->
<p id="t-and-c-with-hint-error" class="block font-semibold text-alert-base">
<span class="sr-only">Error:</span>Error: Por favor, debes aceptar los términos y condiciones
</p>
<!-- /error-message -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="t-and-c-with-hint" name="t-and-c-with-hint" type="checkbox" value="acepto" aria-describedby="t-and-c-with-hint-error t-and-c-with-hint-item-hint" aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="t-and-c-with-hint">Acepto los <a href="#" target="_blank" class="c-link" title="Se abre en ventana nueva del navegador">términos y condiciones</a></label>
<!-- /label -->
<!-- hint -->
<p id="t-and-c-with-hint-item-hint" class="block text-neutral-dark">Puedes visualizarlos en ventana nueva del navegador</p>
<!-- /hint -->
</div>
</div>
</div>
</div>
</div>
<!-- /checkboxes -->
Con fieldset y mensaje de error #
Mostrar códigodel ejemplo: Con fieldset y mensaje de error
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"name": "colours",
"errorMessage": {
"text": "Error: Tienes que seleccionar al menos una opción"
},
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?"
}
},
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico"
},
{
"value": "correo-postal",
"text": "Correo postal"
},
{
"value": "telefono",
"text": "Teléfono"
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="colours-error" aria-errormessage="colours-error">
<legend class="font-bold">
¿Cómo prefieres que te contactemos?
</legend>
<!-- error-message -->
<p id="colours-error" class="block font-semibold text-alert-base">
<span class="sr-only">Error:</span>Error: Tienes que seleccionar al menos una opción
</p>
<!-- /error-message -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="colours" name="colours" type="checkbox" value="correo-electronico" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="colours">Correo electrónico</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="colours-2" name="colours" type="checkbox" value="correo-postal" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="colours-2">Correo postal</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="colours-3" name="colours" type="checkbox" value="telefono" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="colours-3">Teléfono</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con mensaje de error #
Mostrar códigodel ejemplo: Con mensaje de error
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "error-message",
"name": "error-message",
"errorMessage": {
"text": "Error: Tienes que seleccionar al menos una opción"
},
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?"
}
},
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico"
},
{
"value": "correp-postal",
"text": "Correo postal"
},
{
"value": "telefono",
"text": "Teléfono"
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="error-message-error" aria-errormessage="error-message-error">
<legend class="font-bold">
¿Cómo prefieres que te contactemos?
</legend>
<!-- error-message -->
<p id="error-message-error" class="block font-semibold text-alert-base">
<span class="sr-only">Error:</span>Error: Tienes que seleccionar al menos una opción
</p>
<!-- /error-message -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-message" name="error-message" type="checkbox" value="correo-electronico" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="error-message">Correo electrónico</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-message-2" name="error-message" type="checkbox" value="correp-postal" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="error-message-2">Correo postal</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-message-3" name="error-message" type="checkbox" value="telefono" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="error-message-3">Teléfono</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con mensaje de error y pistas en los items #
Mostrar códigodel ejemplo: Con mensaje de error y pistas en los items
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "error-and-hints",
"name": "error-and-hints",
"errorMessage": {
"text": "Error: Tienes que seleccionar al menos una opción"
},
"fieldset": {
"legend": {
"text": "¿Cómo prefieres que te contactemos?"
}
},
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico",
"hint": {
"text": "Asegúrate de que nuestros correos no lleguen a la bandeja de spam."
}
},
{
"value": "correo-postal",
"text": "Correo postal",
"hint": {
"text": "Asegúrate de haber introducido correctamente tu dirección."
}
},
{
"value": "telefono",
"text": "Teléfono",
"hint": {
"text": "Sólo enviamos mensajes durante el día."
}
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="error-and-hints-error" aria-errormessage="error-and-hints-error">
<legend class="font-bold">
¿Cómo prefieres que te contactemos?
</legend>
<!-- error-message -->
<p id="error-and-hints-error" class="block font-semibold text-alert-base">
<span class="sr-only">Error:</span>Error: Tienes que seleccionar al menos una opción
</p>
<!-- /error-message -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-and-hints" name="error-and-hints" type="checkbox" value="correo-electronico" aria-describedby=" error-and-hints-item-hint" aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="error-and-hints">Correo electrónico</label>
<!-- /label -->
<!-- hint -->
<p id="error-and-hints-item-hint" class="block text-neutral-dark">Asegúrate de que nuestros correos no lleguen a la bandeja de spam.</p>
<!-- /hint -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-and-hints-2" name="error-and-hints" type="checkbox" value="correo-postal" aria-describedby=" error-and-hints-2-item-hint" aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="error-and-hints-2">Correo postal</label>
<!-- /label -->
<!-- hint -->
<p id="error-and-hints-2-item-hint" class="block text-neutral-dark">Asegúrate de haber introducido correctamente tu dirección.</p>
<!-- /hint -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="error-and-hints-3" name="error-and-hints" type="checkbox" value="telefono" aria-describedby=" error-and-hints-3-item-hint" aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="error-and-hints-3">Teléfono</label>
<!-- /label -->
<!-- hint -->
<p id="error-and-hints-3-item-hint" class="block text-neutral-dark">Sólo enviamos mensajes durante el día.</p>
<!-- /hint -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con un texto de item muy largo #
Mostrar códigodel ejemplo: Con un texto de item muy largo
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "long-option",
"name": "long-option",
"hint": {
"text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
},
"errorMessage": {
"text": "Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
"fieldset": {
"legend": {
"text": "Maecenas faucibus mollis interdum?"
}
},
"items": [
{
"value": "nullam",
"text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
},
{
"value": "aenean",
"text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
},
{
"value": "fusce",
"text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="long-option-hint long-option-error" aria-errormessage="long-option-error">
<legend class="font-bold">
Maecenas faucibus mollis interdum?
</legend>
<!-- hint -->
<p id="long-option-hint" class="block text-neutral-dark">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<!-- /hint -->
<!-- error-message -->
<p id="long-option-error" class="block font-semibold text-alert-base">
<span class="sr-only">Error:</span>Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!-- /error-message -->
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="long-option" name="long-option" type="checkbox" value="nullam" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="long-option">Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="long-option-2" name="long-option" type="checkbox" value="aenean" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="long-option-2">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="long-option-3" name="long-option" type="checkbox" value="fusce" aria-describedby=" " aria-invalid="true">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="long-option-3">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con items condicionales #
Mostrar códigodel ejemplo: Con items condicionales
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "how-contacted",
"name": "with-conditional-items",
"fieldset": {
"legend": {
"text": "¿Cómo quieres que te contactemos?"
}
},
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico",
"conditional": {
"html": " <!-- input -->\n<div class=\"c-form-group\">\n <!-- label -->\n <label class=\"block\" for=\"mobile-1\">Número de teléfono móvil</label>\n <!-- /label -->\n <input class=\"c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base\" id=\"mobile-1\" name=\"mobile-name-1\" type=\"text\">\n</div>\n<!-- /input -->\n"
}
},
{
"value": "telefono",
"text": "Teléfono",
"conditional": {
"html": " <!-- input -->\n<div class=\"c-form-group\">\n <!-- label -->\n <label class=\"block\" for=\"telefono-2\">Número de teléfono</label>\n <!-- /label -->\n <input class=\"c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base\" id=\"telefono-2\" name=\"telefono-name-2\" type=\"text\">\n</div>\n<!-- /input -->\n"
}
},
{
"value": "mensaje-SMS",
"text": "Mensaje SMS",
"conditional": {
"html": " <!-- input -->\n<div class=\"c-form-group\">\n <!-- label -->\n <label class=\"block\" for=\"mobile-2\">Número de teléfono móvil</label>\n <!-- /label -->\n <input class=\"c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base\" id=\"mobile-2\" name=\"mobile-name-2\" type=\"text\">\n</div>\n<!-- /input -->\n"
}
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
<legend class="font-bold">
¿Cómo quieres que te contactemos?
</legend>
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="how-contacted" name="with-conditional-items" type="checkbox" value="correo-electronico" aria-controls="conditional-how-contacted" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="how-contacted">Correo electrónico</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-how-contacted">
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="mobile-1">Número de teléfono móvil</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="mobile-1" name="mobile-name-1" type="text">
</div>
<!-- /input -->
</div>
</div>
<div class=" c-checkboxes__conditional c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="how-contacted-2" name="with-conditional-items" type="checkbox" value="telefono" aria-controls="conditional-how-contacted-2" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="how-contacted-2">Teléfono</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-how-contacted-2">
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="telefono-2">Número de teléfono</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="telefono-2" name="telefono-name-2" type="text">
</div>
<!-- /input -->
</div>
</div>
<div class=" c-checkboxes__conditional c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="how-contacted-3" name="with-conditional-items" type="checkbox" value="mensaje-SMS" aria-controls="conditional-how-contacted-3" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="how-contacted-3">Mensaje SMS</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-how-contacted-3">
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="mobile-2">Número de teléfono móvil</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="mobile-2" name="mobile-name-2" type="text">
</div>
<!-- /input -->
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con items condicionales anidados #
Mostrar códigodel ejemplo: Con items condicionales anidados
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "how-contacted-nested",
"name": "with-conditional-nested-items",
"fieldset": {
"legend": {
"text": "¿Cómo quieres que te contactemos?"
}
},
"items": [
{
"value": "presencial",
"text": "Presencial",
"checked": true,
"conditional": {
"html": " \n\n<!-- checkboxes -->\n<div class=\"c-form-group\">\n <div class=\"c-checkboxes\" data-module=\"c-checkboxes\">\n <div class=\" c-checkboxes__conditional c-checkboxes__conditional-active\">\n <div class=\"relative flex items-start py-base\">\n <div class=\"flex items-center mx-sm\">\n <input class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base\" id=\"with-conditional-items-checked-nested-1\" name=\"with-conditional-items-checked-nested-1\" type=\"checkbox\" value=\"oficinas-de-registro\" checked aria-controls=\"conditional-with-conditional-items-checked-nested-1\" aria-describedby=\" \">\n </div>\n <div class=\"pt-0.5 leading-5\">\n <!-- label -->\n <label class=\"block\" for=\"with-conditional-items-checked-nested-1\">Oficinas de registro</label>\n <!-- /label -->\n </div>\n </div>\n <div class=\"mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item\" id=\"conditional-with-conditional-items-checked-nested-1\">\n \n \n <!-- checkboxes -->\n <div class=\"c-form-group\">\n <div class=\"c-checkboxes\" data-module=\"c-checkboxes\">\n <div class=\" c-checkboxes__conditional-hidden\">\n <div class=\"relative flex items-start py-base\">\n <div class=\"flex items-center mx-sm\">\n <input class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base\" id=\"oficina-principal-id\" name=\"oficina-principal\" type=\"checkbox\" value=\"oficina-principal\" aria-describedby=\" \">\n </div>\n <div class=\"pt-0.5 leading-5\">\n <!-- label -->\n <label class=\"block\" for=\"oficina-principal-id\">Oficina principal</label>\n <!-- /label -->\n </div>\n </div>\n </div>\n <div class=\" c-checkboxes__conditional-hidden\">\n <div class=\"relative flex items-start py-base\">\n <div class=\"flex items-center mx-sm\">\n <input class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base\" id=\"oficina-secundaria-id\" name=\"oficina-secundaria\" type=\"checkbox\" value=\"oficina-secundaria\" aria-describedby=\" \">\n </div>\n <div class=\"pt-0.5 leading-5\">\n <!-- label -->\n <label class=\"block\" for=\"oficina-secundaria-id\">Oficina secundaria</label>\n <!-- /label -->\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- /checkboxes -->\n \n \n </div>\n </div>\n </div>\n</div>\n<!-- /checkboxes -->\n\n"
}
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
<legend class="font-bold">
¿Cómo quieres que te contactemos?
</legend>
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional c-checkboxes__conditional-active">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="how-contacted-nested" name="with-conditional-nested-items" type="checkbox" value="presencial" checked aria-controls="conditional-how-contacted-nested" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="how-contacted-nested">Presencial</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-how-contacted-nested">
<!-- checkboxes -->
<div class="c-form-group">
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional c-checkboxes__conditional-active">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-conditional-items-checked-nested-1" name="with-conditional-items-checked-nested-1" type="checkbox" value="oficinas-de-registro" checked aria-controls="conditional-with-conditional-items-checked-nested-1" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="with-conditional-items-checked-nested-1">Oficinas de registro</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-with-conditional-items-checked-nested-1">
<!-- checkboxes -->
<div class="c-form-group">
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="oficina-principal-id" name="oficina-principal" type="checkbox" value="oficina-principal" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="oficina-principal-id">Oficina principal</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="oficina-secundaria-id" name="oficina-secundaria" type="checkbox" value="oficina-secundaria" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="oficina-secundaria-id">Oficina secundaria</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<!-- /checkboxes -->
</div>
</div>
</div>
</div>
<!-- /checkboxes -->
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con item condicional seleccionado #
Mostrar códigodel ejemplo: Con item condicional seleccionado
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "with-conditional-items-checked",
"name": "with-conditional-items-checked",
"fieldset": {
"legend": {
"text": "¿Cómo quieres que te contactemos?"
}
},
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico",
"conditional": {
"html": " <!-- input -->\n<div class=\"c-form-group\">\n <!-- label -->\n <label class=\"block\" for=\"mobile-3\">Número de teléfono móvil</label>\n <!-- /label -->\n <input class=\"c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base\" id=\"mobile-3\" name=\"mobile-name-3\" type=\"text\">\n</div>\n<!-- /input -->\n"
}
},
{
"value": "telefono",
"text": "Teléfono",
"checked": true,
"conditional": {
"html": " <!-- input -->\n<div class=\"c-form-group\">\n <!-- label -->\n <label class=\"block\" for=\"telefono-3\">Número de teléfono</label>\n <!-- /label -->\n <input class=\"c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base\" id=\"telefono-3\" name=\"telefono-name-3\" type=\"text\">\n</div>\n<!-- /input -->\n"
}
},
{
"value": "mensaje-SMS",
"text": "Mensaje SMS",
"conditional": {
"html": " <!-- input -->\n<div class=\"c-form-group\">\n <!-- label -->\n <label class=\"block\" for=\"mobile-4\">Número de teléfono móvil</label>\n <!-- /label -->\n <input class=\"c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base\" id=\"mobile-4\" name=\"mobile-name-4\" type=\"text\">\n</div>\n<!-- /input -->\n"
}
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
<legend class="font-bold">
¿Cómo quieres que te contactemos?
</legend>
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-conditional-items-checked" name="with-conditional-items-checked" type="checkbox" value="correo-electronico" aria-controls="conditional-with-conditional-items-checked" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="with-conditional-items-checked">Correo electrónico</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-with-conditional-items-checked">
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="mobile-3">Número de teléfono móvil</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="mobile-3" name="mobile-name-3" type="text">
</div>
<!-- /input -->
</div>
</div>
<div class=" c-checkboxes__conditional c-checkboxes__conditional-active">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-conditional-items-checked-2" name="with-conditional-items-checked" type="checkbox" value="telefono" checked aria-controls="conditional-with-conditional-items-checked-2" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="with-conditional-items-checked-2">Teléfono</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-with-conditional-items-checked-2">
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="telefono-3">Número de teléfono</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="telefono-3" name="telefono-name-3" type="text">
</div>
<!-- /input -->
</div>
</div>
<div class=" c-checkboxes__conditional c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-conditional-items-checked-3" name="with-conditional-items-checked" type="checkbox" value="mensaje-SMS" aria-controls="conditional-with-conditional-items-checked-3" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="with-conditional-items-checked-3">Mensaje SMS</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-with-conditional-items-checked-3">
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="mobile-4">Número de teléfono móvil</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="mobile-4" name="mobile-name-4" type="text">
</div>
<!-- /input -->
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Con clases opcionales del form-group mostrando un error del grupo #
Mostrar códigodel ejemplo: Con clases opcionales del form-group mostrando un error del grupo
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "optional-classes-showing-error",
"name": "optional-classes-showing-error",
"formGroup": {
"classes": "c-form-group--error"
},
"fieldset": {
"legend": {
"text": "¿Cómo quieres que te contactemos?"
}
},
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico",
"conditional": {
"html": " <!-- input -->\n<div class=\"c-form-group\">\n <!-- label -->\n <label class=\"block\" for=\"mobile-5\">Número de teléfono móvil</label>\n <!-- /label -->\n <input class=\"c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base\" id=\"mobile-5\" name=\"mobile-name-5\" type=\"text\">\n</div>\n<!-- /input -->\n"
}
},
{
"value": "telefono",
"text": "Teléfono",
"checked": true,
"conditional": {
"html": " <!-- input -->\n<div class=\"c-form-group c-form-group--error\">\n <!-- label -->\n <label class=\"block\" for=\"input-with-error-message-1\">Número de teléfono móvil</label>\n <!-- /label -->\n <!-- error-message -->\n <p id=\"input-with-error-message-1-error\" class=\"block font-semibold text-alert-base\">\n <span class=\"sr-only\">Error:</span>Error: Este campo no puede estar vacío\n </p>\n <!-- /error-message -->\n <input class=\"c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base \" id=\"input-with-error-message-1\" name=\"test-name-1\" type=\"text\" aria-describedby=\"input-with-error-message-1-error\" aria-errormessage=\"input-with-error-message-1-error\" aria-invalid=\"true\">\n</div>\n<!-- /input -->\n"
}
},
{
"value": "mensaje-SMS",
"text": "Mensaje SMS",
"conditional": {
"html": " <!-- input -->\n<div class=\"c-form-group\">\n <!-- label -->\n <label class=\"block\" for=\"mobile-6\">Número de teléfono móvil</label>\n <!-- /label -->\n <input class=\"c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base\" id=\"mobile-6\" name=\"mobile-name-6\" type=\"text\">\n</div>\n<!-- /input -->\n"
}
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset>
<legend class="font-bold">
¿Cómo quieres que te contactemos?
</legend>
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="optional-classes-showing-error" name="optional-classes-showing-error" type="checkbox" value="correo-electronico" aria-controls="conditional-optional-classes-showing-error" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="optional-classes-showing-error">Correo electrónico</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-optional-classes-showing-error">
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="mobile-5">Número de teléfono móvil</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="mobile-5" name="mobile-name-5" type="text">
</div>
<!-- /input -->
</div>
</div>
<div class=" c-checkboxes__conditional c-checkboxes__conditional-active">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="optional-classes-showing-error-2" name="optional-classes-showing-error" type="checkbox" value="telefono" checked aria-controls="conditional-optional-classes-showing-error-2" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="optional-classes-showing-error-2">Teléfono</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-optional-classes-showing-error-2">
<!-- input -->
<div class="c-form-group c-form-group--error">
<!-- label -->
<label class="block" for="input-with-error-message-1">Número de teléfono móvil</label>
<!-- /label -->
<!-- error-message -->
<p id="input-with-error-message-1-error" class="block font-semibold text-alert-base">
<span class="sr-only">Error:</span>Error: Este campo no puede estar vacío
</p>
<!-- /error-message -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base " id="input-with-error-message-1" name="test-name-1" type="text" aria-describedby="input-with-error-message-1-error" aria-errormessage="input-with-error-message-1-error" aria-invalid="true">
</div>
<!-- /input -->
</div>
</div>
<div class=" c-checkboxes__conditional c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="optional-classes-showing-error-3" name="optional-classes-showing-error" type="checkbox" value="mensaje-SMS" aria-controls="conditional-optional-classes-showing-error-3" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="optional-classes-showing-error-3">Mensaje SMS</label>
<!-- /label -->
</div>
</div>
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="conditional-optional-classes-showing-error-3">
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="mobile-6">Número de teléfono móvil</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="mobile-6" name="mobile-name-6" type="text">
</div>
<!-- /input -->
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->
Peque #
Mostrar códigodel ejemplo: Peque
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "small",
"name": "peque",
"classes": "c-checkboxes--sm",
"items": [
{
"value": "correo-electronico",
"text": "Correo electrónico",
"classes": "-mt-base",
"label": {
"classes": "text-sm -mt-1"
}
},
{
"value": "correo-postal",
"text": "Correo postal",
"classes": "-mt-base",
"label": {
"classes": "text-sm -mt-1"
}
},
{
"value": "telefono",
"text": "Teléfono",
"classes": "-mt-base",
"label": {
"classes": "text-sm -mt-1"
}
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<div class="c-checkboxes c-checkboxes--sm" data-module="c-checkboxes">
<div class=" -mt-base c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="small" name="peque" type="checkbox" value="correo-electronico" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block text-sm -mt-1" for="small">Correo electrónico</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" -mt-base c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="small-2" name="peque" type="checkbox" value="correo-postal" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block text-sm -mt-1" for="small-2">Correo postal</label>
<!-- /label -->
</div>
</div>
</div>
<div class=" -mt-base c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="small-3" name="peque" type="checkbox" value="telefono" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block text-sm -mt-1" for="small-3">Teléfono</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<!-- /checkboxes -->
Indeterminado #
Usando el parámetro "isIndeterminate": true
podemos crear un item del checkbox que tenga 3 estados: marcado, desmarcado o indeterminado. El estado indeterminado expresa que hay sólo algún item seleccionado pero no todos. Útil para selecciones múltiples.
Mostrar códigodel ejemplo: Indeterminado
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "indeterminate",
"name": "indeterminate",
"classes": "c-checkboxes--sm",
"items": [
{
"value": "indeterminate",
"text": "1 elemento seleccionado",
"isIndeterminate": true,
"classes": "-mt-base",
"label": {
"classes": "text-sm -mt-1"
}
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<div class="c-checkboxes c-checkboxes--sm" data-module="c-checkboxes">
<div class=" -mt-base c-checkboxes__indeterminate">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="indeterminate" name="indeterminate" type="checkbox" value="indeterminate" aria-describedby=" " onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block text-sm -mt-1" for="indeterminate">1 elemento seleccionado</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<!-- /checkboxes -->
Indeterminado marcado #
Usando los parámetros "isIndeterminate": true
y "indeterminateChecked": true
podemos marcar como estado indeterminado un item que sea de tipo indeterminado.
Mostrar códigodel ejemplo: Indeterminado marcado
Contenido
Nunjucks macro
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "indeterminate-checked",
"name": "indeterminate-checked",
"classes": "c-checkboxes--sm",
"items": [
{
"value": "indeterminate-checked-item",
"text": "1 elemento seleccionado",
"isIndeterminate": true,
"indeterminateChecked": true,
"checked": false,
"classes": "-mt-base",
"label": {
"classes": "text-sm -mt-1"
}
}
]
}) }}
HTML
<!-- checkboxes -->
<div class="c-form-group">
<div class="c-checkboxes c-checkboxes--sm" data-module="c-checkboxes">
<div class=" -mt-base c-checkboxes__indeterminate c-checkboxes__indeterminate-active ">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="indeterminate-checked" name="indeterminate-checked" type="checkbox" value="indeterminate-checked-item" aria-describedby=" " onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block text-sm -mt-1" for="indeterminate-checked">1 elemento seleccionado</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<!-- /checkboxes -->