desy-html

Checkboxes

Por defecto

¿Cómo prefieres que te contactemos?

Si lo deseas puedes seleccionar varios elementos.

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"
    }
  ]
}) }}

Con id y name

¿Cómo prefieres que te contactemos?

Si lo deseas puedes seleccionar varios elementos.

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"
    }
  ]
}) }}

Con pistas en los items

¿Cómo prefieres que te contactemos?

Asegúrate de que el correo no llega a la bandeja de spam.

Asegúrate de haber introducido la dirección postal correctamente.

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."
      }
    }
  ]
}) }}

Con líneas divisorias

¿Cómo prefieres que te contactemos?

Si lo deseas puedes seleccionar varios elementos.

Asegúrate de haber introducido la dirección postal correctamente.

¿Cuál es tu número de teléfono fijo?

Asegúrate de haber introducido la dirección postal correctamente.

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": "<!-- fieldset -->\n<fieldset>\n  <legend class=\"mb-sm sr-only\">\n    ¿Cuál es tu número de teléfono fijo?\n  </legend>\n      <div class=\"c-form-group\">\n      <!-- input -->\n  <div class=\"c-form-group\">\n    <!-- label -->\n    <label class=\"block\" for=\"telefono-1\">Número de teléfono fijo</label>\n    <!-- /label -->\n    <input class=\"c-input block mt-sm border-black rounded-sm 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      </div>\n  </fieldset>\n<!-- /fieldset -->"
      }
    },
    {
      "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."
      }
    }
  ]
}) }}

Con clases de css aplicadas

Los parámetros classes nos permiten aplicar clases de Tailwind CSS a nuestro componente.

¿Cómo prefieres que te contactemos?

Asegúrate de que el correo no llega a la bandeja de spam.

Asegúrate de haber introducido la dirección postal correctamente.

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"
    }
  ]
}) }}

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
    }
  ]
}) }}

Con un legend del tamaño de un encabezado h2

¿Cómo prefieres que te contactemos?

Si lo deseas puedes seleccionar varios elementos.

Error:Tienes que seleccionar al menos una opción. Soluciona el error.

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": "Tienes que seleccionar al menos una opción. Soluciona el error."
  },
  "items": [
    {
      "value": "correo-electronico",
      "text": "Correo electrónico"
    },
    {
      "value": "correp-postal",
      "text": "Correo postal"
    },
    {
      "value": "telefono",
      "text": "Teléfono"
    }
  ]
}) }}

Sin fieldset

Usa este ejemplo si vas a escribir tú mismo un fieldset, rodeándolo. Recuerda que el uso de fieldset es necesario por accesibilidad.

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"
    }
  ]
}) }}

Con una sóla opción usando 'aria-describedby' en el input

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

Error:Por favor, debes aceptar los términos y condiciones. Soluciona el error.

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": "Por favor, debes aceptar los términos y condiciones. Soluciona el error."
  },
  "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>"
    }
  ]
}) }}

Con una sóla opción (y pista) usando 'aria-describedby' en el input

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

Error:Por favor, debes aceptar los términos y condiciones. Soluciona el error.

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": "Por favor, debes aceptar los términos y condiciones. Soluciona el error."
  },
  "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"
      }
    }
  ]
}) }}

Con fieldset y mensaje de error

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

¿Cómo prefieres que te contactemos?

Error:Tienes que seleccionar al menos una opción. Soluciona el 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": "Tienes que seleccionar al menos una opción. Soluciona el error."
  },
  "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"
    }
  ]
}) }}

Con mensaje de error

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

¿Cómo prefieres que te contactemos?

Error:Tienes que seleccionar al menos una opción. Soluciona el 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": "Tienes que seleccionar al menos una opción. Soluciona el error."
  },
  "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"
    }
  ]
}) }}

Con mensaje de error y pistas en los items

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

¿Cómo prefieres que te contactemos?

Error:Tienes que seleccionar al menos una opción. Soluciona el error.

Asegúrate de que nuestros correos no lleguen a la bandeja de spam.

Asegúrate de haber introducido correctamente tu dirección.

Sólo enviamos mensajes durante el día.

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": "Tienes que seleccionar al menos una opción. Soluciona el error."
  },
  "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."
      }
    }
  ]
}) }}

Con un texto de item muy largo

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

Maecenas faucibus mollis interdum?

Nullam id dolor id nibh ultricies vehicula ut id elit.

Error:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Soluciona el error.

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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Soluciona el error."
  },
  "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."
    }
  ]
}) }}

Con items condicionales

El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <fieldset> o bien de una etiqueta <div> con role="group" que tenga un aria-label o aria-labelledby.

¿Cómo quieres que te contactemos?
¿Cuál es tu número de teléfono móvil?
¿Cuál es tu número de teléfono fijo?
¿Cuál es tu número de teléfono móvil?
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": "<!-- fieldset -->\n<fieldset>\n  <legend class=\"mb-sm sr-only\">\n    ¿Cuál es tu número de teléfono móvil?\n  </legend>\n      <div class=\"c-form-group\">\n      <!-- 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-sm 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      </div>\n  </fieldset>\n<!-- /fieldset -->"
      }
    },
    {
      "value": "telefono",
      "text": "Teléfono",
      "conditional": {
        "html": "<!-- fieldset -->\n<fieldset>\n  <legend class=\"mb-sm sr-only\">\n    ¿Cuál es tu número de teléfono fijo?\n  </legend>\n      <div class=\"c-form-group\">\n      <!-- input -->\n  <div class=\"c-form-group\">\n    <!-- label -->\n    <label class=\"block\" for=\"telefono-2\">Número de teléfono fijo</label>\n    <!-- /label -->\n    <input class=\"c-input block mt-sm border-black rounded-sm 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      </div>\n  </fieldset>\n<!-- /fieldset -->"
      }
    },
    {
      "value": "mensaje-SMS",
      "text": "Mensaje SMS",
      "conditional": {
        "html": "<!-- fieldset -->\n<fieldset>\n  <legend class=\"mb-sm sr-only\">\n    ¿Cuál es tu número de teléfono móvil?\n  </legend>\n      <div class=\"c-form-group\">\n      <!-- 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-sm 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      </div>\n  </fieldset>\n<!-- /fieldset -->"
      }
    }
  ]
}) }}

Con item condicional seleccionado

Usa el parámetro 'checked': true para mostrar un item condicional seleccionado. El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <fieldset> o bien de una etiqueta <div> con role="group" que tenga un aria-label o aria-labelledby.

¿Cómo quieres que te contactemos?
¿Cuál es tu número de teléfono móvil?
¿Cuál es tu número de teléfono fijo?
¿Cuál es tu número de teléfono móvil?
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": "<!-- fieldset -->\n<fieldset>\n  <legend class=\"mb-sm sr-only\">\n    ¿Cuál es tu número de teléfono móvil?\n  </legend>\n      <div class=\"c-form-group\">\n      <!-- 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-sm 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      </div>\n  </fieldset>\n<!-- /fieldset -->"
      }
    },
    {
      "value": "telefono",
      "text": "Teléfono",
      "checked": true,
      "conditional": {
        "html": "<!-- fieldset -->\n<fieldset>\n  <legend class=\"mb-sm sr-only\">\n    ¿Cuál es tu número de teléfono fijo?\n  </legend>\n      <div class=\"c-form-group\">\n      <!-- input -->\n  <div class=\"c-form-group\">\n    <!-- label -->\n    <label class=\"block\" for=\"telefono-3\">Número de teléfono fijo</label>\n    <!-- /label -->\n    <input class=\"c-input block mt-sm border-black rounded-sm 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      </div>\n  </fieldset>\n<!-- /fieldset -->"
      }
    },
    {
      "value": "mensaje-SMS",
      "text": "Mensaje SMS",
      "conditional": {
        "html": "<!-- fieldset -->\n<fieldset>\n  <legend class=\"mb-sm sr-only\">\n    ¿Cuál es tu número de teléfono móvil?\n  </legend>\n      <div class=\"c-form-group\">\n      <!-- 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-sm 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      </div>\n  </fieldset>\n<!-- /fieldset -->"
      }
    }
  ]
}) }}

Con clases opcionales del form-group mostrando un error del grupo

¿Cómo quieres que te contactemos?
¿Cuál es tu número de teléfono móvil?
¿Cuál es tu número de teléfono móvil?

Error:Este campo no puede estar vacío

¿Cuál es tu número de teléfono móvil?
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": "<!-- fieldset -->\n<fieldset>\n  <legend class=\"mb-sm sr-only\">\n    ¿Cuál es tu número de teléfono móvil?\n  </legend>\n      <div class=\"c-form-group\">\n      <!-- 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-sm 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      </div>\n  </fieldset>\n<!-- /fieldset -->"
      }
    },
    {
      "value": "telefono",
      "text": "Teléfono",
      "checked": true,
      "conditional": {
        "html": "<!-- fieldset -->\n<fieldset>\n  <legend class=\"mb-sm sr-only\">\n    ¿Cuál es tu número de teléfono móvil?\n  </legend>\n      <div class=\"c-form-group\">\n        <!-- 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>Este campo no puede estar vacío\n    </p>\n    <!-- /error-message -->\n    <input class=\"c-input block mt-sm border-black rounded-sm 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-errormessage=\"input-with-error-message-1-error\" aria-invalid=\"true\">\n  </div>\n  <!-- /input -->\n      </div>\n  </fieldset>\n<!-- /fieldset -->"
      }
    },
    {
      "value": "mensaje-SMS",
      "text": "Mensaje SMS",
      "conditional": {
        "html": "<!-- fieldset -->\n<fieldset>\n  <legend class=\"mb-sm sr-only\">\n    ¿Cuál es tu número de teléfono móvil?\n  </legend>\n      <div class=\"c-form-group\">\n      <!-- 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-sm 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      </div>\n  </fieldset>\n<!-- /fieldset -->"
      }
    }
  ]
}) }}

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"
      }
    }
  ]
}) }}

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"
      }
    }
  ]
}) }}

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"
      }
    }
  ]
}) }}