desy-html

Radios

Mostrar parámetros

Parámetros del componente

              params:
- 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 `idPrefix` is not passed, fallback to using the name attribute instead.
- name: name
  type: string
  required: true
  description: Name attribute for each radio item.
- name: items
  type: array
  required: true
  description: Array of radio items objects.
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within each radio 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 radio item label. If `html` is provided, the `text` argument will be ignored.
  - name: id
    type: string
    required: false
    description: Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied.
  - name: value
    type: string
    required: true
    description: Value for the radio input.
  - name: label
    type: object
    required: false
    description: Provide attributes and classes to each radio item label.
    isComponent: true
  - name: hint
    type: object
    required: false
    description: Provide hint to each checkbox item.
    isComponent: true
  - name: divider
    type: string
    required: false
    description: Divider text to separate radio items, for example the text "or".
  - name: checked
    type: boolean
    required: false
    description: If true, radio will be checked.
  - name: conditional
    type: string
    required: false
    description: If true, content provided will be revealed when the item is checked.
  - name: conditional.html
    type: html
    required: false
    description: Provide content for the conditional reveal.
  - name: disabled
    type: boolean
    required: false
    description: If true, radio 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 radio 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 radio container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the radio input tag.

Por defecto

¿Quieres que te contactemos por correo electrónico?

Sólo puedes seleccionar un elemento.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "default",
  "name": "por defecto",
  "fieldset": {
    "legend": {
      "text": "¿Quieres que te contactemos por correo electrónico?"
    }
  },
  "hint": {
    "text": "Sólo puedes seleccionar un elemento."
  },
  "items": [
    {
      "value": "si",
      "text": "Si"
    },
    {
      "value": "no",
      "text": "No",
      "checked": true
    }
  ]
}) }}

En línea

¿Quieres que te contactemos por correo electrónico?

Sólo puedes seleccionar un elemento.

Mostrar códigodel ejemplo: En línea

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "inline",
  "classes": "flex",
  "name": "inline",
  "fieldset": {
    "legend": {
      "text": "¿Quieres que te contactemos por correo electrónico?"
    }
  },
  "hint": {
    "text": "Sólo puedes seleccionar un elemento."
  },
  "items": [
    {
      "value": "si",
      "text": "Si",
      "classes": "mr-sm"
    },
    {
      "value": "no",
      "text": "No",
      "classes": "mr-sm",
      "checked": true
    }
  ]
}) }}

Con deshabilitado

¿Quieres que te contactemos por correo electrónico?

Sólo puedes seleccionar un elemento.

Mostrar códigodel ejemplo: Con deshabilitado

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "example-disabled",
  "name": "example-disabled",
  "fieldset": {
    "legend": {
      "text": "¿Quieres que te contactemos por correo electrónico?"
    }
  },
  "hint": {
    "text": "Sólo puedes seleccionar un elemento."
  },
  "items": [
    {
      "value": "si",
      "text": "Si",
      "disabled": true,
      "checked": true
    },
    {
      "value": "no",
      "text": "No",
      "disabled": true
    }
  ]
}) }}

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>.

¿Cómo prefieres que te contactemos?

Selecciona una de las opciones.

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

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

Mostrar códigodel ejemplo: Con un legend como encabezado

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "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": "Selecciona una de las opciones."
  },
  "items": [
    {
      "value": "part-2",
      "text": "Por correo electrónico",
      "hint": {
        "text": "Asegúrate de que nuestros correos no lleguen a la bandeja de spam."
      }
    },
    {
      "value": "part-3",
      "text": "Por correo postal",
      "hint": {
        "text": "Asegúrate de haber introducido correctamente tu dirección."
      }
    }
  ]
}) }}

Con un legend del tamaño de un encabezado h2

¿Cómo prefieres que te contactemos?

Selecciona una de las opciones.

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

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

Mostrar códigodel ejemplo: Con un legend del tamaño de un encabezado h2

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "medium-legend",
  "name": "medium-legend",
  "fieldset": {
    "legend": {
      "text": "¿Cómo prefieres que te contactemos?",
      "classes": "c-h2"
    }
  },
  "hint": {
    "text": "Selecciona una de las opciones."
  },
  "items": [
    {
      "value": "part-2",
      "text": "Por correo electrónico",
      "hint": {
        "text": "Asegúrate de que nuestros correos no lleguen a la bandeja de spam."
      }
    },
    {
      "value": "part-3",
      "text": "Por correo postal",
      "hint": {
        "text": "Asegúrate de haber introducido correctamente tu dirección."
      }
    }
  ]
}) }}

Con un divisor

¿Cómo prefieres que te contactemos?

o bien

Mostrar códigodel ejemplo: Con un divisor

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "example-divider",
  "name": "example-divider",
  "fieldset": {
    "legend": {
      "text": "¿Cómo prefieres que te contactemos?"
    }
  },
  "items": [
    {
      "value": "correo-electronico",
      "text": "Correo electrónico"
    },
    {
      "value": "correo-postal",
      "text": "Correo postal"
    },
    {
      "divider": "o bien"
    },
    {
      "value": "telefono",
      "text": "Teléfono"
    }
  ]
}) }}

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/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "hints-on-items",
  "name": "hints-on-items",
  "fieldset": {
    "legend": {
      "text": "¿Cómo prefieres que te contactemos?",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "correo-electronico",
      "text": "Correo electrónico",
      "hint": {
        "text": "Asegúrate de que el correo no llega a la bandeja de spam."
      }
    },
    {
      "value": "correo-postal",
      "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?

Sólo puedes elegir un elemento.

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 líneas divisorias

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "has-dividers",
  "name": "has-dividers",
  "fieldset": {
    "legend": {
      "text": "¿Cómo prefieres que te contactemos?"
    }
  },
  "hint": {
    "text": "Sólo puedes elegir un elemento."
  },
  "hasDividers": true,
  "items": [
    {
      "value": "correo-electronico",
      "text": "Correo electrónico",
      "classes": "font-normal",
      "hint": {
        "text": "Asegúrate de que el correo no llega a la bandeja de spam."
      }
    },
    {
      "value": "correo-postal",
      "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/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "classes",
  "name": "classes",
  "fieldset": {
    "legend": {
      "text": "¿Cómo prefieres que te contactemos?",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "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"
    },
    {
      "value": "correo-postal",
      "text": "Correo postal",
      "hint": {
        "text": "Asegúrate de haber introducido la dirección postal correctamente."
      },
      "classes": "bg-neutral-lighter"
    }
  ]
}) }}

Sin fieldset

Mostrar códigodel ejemplo: Sin fieldset

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "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 fieldset y mensaje de error

¿Quieres que te contactemos por correo electrónico?

Error:Error: Tienes que seleccionar al menos una opción

Mostrar códigodel ejemplo: Con fieldset y mensaje de error

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "fieldset-and-error",
  "name": "fieldset-and-error",
  "errorMessage": {
    "text": "Error: Tienes que seleccionar al menos una opción"
  },
  "fieldset": {
    "legend": {
      "text": "¿Quieres que te contactemos por correo electrónico?"
    }
  },
  "items": [
    {
      "value": "si",
      "text": "Si"
    },
    {
      "value": "no",
      "text": "No",
      "checked": true
    }
  ]
}) }}

Con un texto de item muy largo

Maecenas faucibus mollis interdum?

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Mostrar códigodel ejemplo: Con un texto de item muy largo

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "very-long",
  "name": "very-long",
  "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."
    }
  ]
}) }}

Con items condicionales

¿Cómo quieres que te contactemos?
Mostrar códigodel ejemplo: Con items condicionales

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "conditional-items",
  "name": "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",
      "checked": true,
      "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": "Sin conditional"
    }
  ]
}) }}

Con items condicionales anidados

¿Cómo quieres que te contactemos?
Mostrar códigodel ejemplo: Con items condicionales anidados

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "with-conditional-nested-items",
  "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<!-- radios -->\n<div class=\"c-form-group\">\n    <div class=\"c-radios\" data-module=\"c-radios\">\n    <div class=\" c-radios__conditional c-radios__conditional-active \">\n      <div>\n        <div class=\"relative flex items-start py-base\">\n          <div class=\"flex items-center mx-sm\">\n            <input class=\"w-6 h-6 text-primary-base 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=\"radio\" value=\"oficinas-de-registro\" checked data-aria-controls=\"conditional-with-conditional-items-checked-nested-1\">\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>\n      <div class=\"mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base c-radios__conditional-item\" id=\"conditional-with-conditional-items-checked-nested-1\">\n          \n        \n        <!-- radios -->\n        <div class=\"c-form-group\">\n            <div class=\"c-radios\" data-module=\"c-radios\">\n            <div class=\" c-radios__conditional-active \">\n              <div>\n                <div class=\"relative flex items-start py-base\">\n                  <div class=\"flex items-center mx-sm\">\n                    <input class=\"w-6 h-6 text-primary-base 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-oficinas-de-registro-1\" name=\"grandchild-oficinas-de-registro-1\" type=\"radio\" value=\"oficina-principal-oficinas-de-registro-1\" checked>\n                  </div>\n                  <div class=\"pt-0.5 leading-5\">\n                    <!-- label -->\n                    <label class=\"block\" for=\"oficina-principal-id-oficinas-de-registro-1\">Oficina principal</label>\n                    <!-- /label -->\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\" c-radios__conditional-hidden \">\n              <div>\n                <div class=\"relative flex items-start py-base\">\n                  <div class=\"flex items-center mx-sm\">\n                    <input class=\"w-6 h-6 text-primary-base 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-oficinas-de-registro-1\" name=\"grandchild-oficinas-de-registro-1\" type=\"radio\" value=\"oficina-secundaria-oficinas-de-registro-1\">\n                  </div>\n                  <div class=\"pt-0.5 leading-5\">\n                    <!-- label -->\n                    <label class=\"block\" for=\"oficina-secundaria-id-oficinas-de-registro-1\">Oficina secundaria</label>\n                    <!-- /label -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n        </div>\n        <!-- /radios -->\n        \n        \n      </div>\n    </div>\n    <div class=\" c-radios__conditional c-radios__conditional-hidden \">\n      <div>\n        <div class=\"relative flex items-start py-base\">\n          <div class=\"flex items-center mx-sm\">\n            <input class=\"w-6 h-6 text-primary-base 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-2\" name=\"with-conditional-items-checked-nested-1\" type=\"radio\" value=\"oficinas-locales\" data-aria-controls=\"conditional-with-conditional-items-checked-nested-1-2\">\n          </div>\n          <div class=\"pt-0.5 leading-5\">\n            <!-- label -->\n            <label class=\"block\" for=\"with-conditional-items-checked-nested-1-2\">Oficinas locales</label>\n            <!-- /label -->\n          </div>\n        </div>\n      </div>\n      <div class=\"mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base c-radios__conditional-item\" id=\"conditional-with-conditional-items-checked-nested-1-2\">\n          \n        \n        <!-- radios -->\n        <div class=\"c-form-group\">\n            <div class=\"c-radios\" data-module=\"c-radios\">\n            <div class=\" c-radios__conditional-active \">\n              <div>\n                <div class=\"relative flex items-start py-base\">\n                  <div class=\"flex items-center mx-sm\">\n                    <input class=\"w-6 h-6 text-primary-base 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-oficinas-locales-1\" name=\"grandchild-oficinas-locales-1\" type=\"radio\" value=\"oficina-principal-oficinas-locales-1\" checked>\n                  </div>\n                  <div class=\"pt-0.5 leading-5\">\n                    <!-- label -->\n                    <label class=\"block\" for=\"oficina-principal-id-oficinas-locales-1\">Oficina principal</label>\n                    <!-- /label -->\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\" c-radios__conditional-hidden \">\n              <div>\n                <div class=\"relative flex items-start py-base\">\n                  <div class=\"flex items-center mx-sm\">\n                    <input class=\"w-6 h-6 text-primary-base 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-oficinas-locales-1\" name=\"grandchild-oficinas-locales-1\" type=\"radio\" value=\"oficina-secundaria-oficinas-locales-1\">\n                  </div>\n                  <div class=\"pt-0.5 leading-5\">\n                    <!-- label -->\n                    <label class=\"block\" for=\"oficina-secundaria-id-oficinas-locales-1\">Oficina secundaria</label>\n                    <!-- /label -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n        </div>\n        <!-- /radios -->\n        \n        \n      </div>\n    </div>\n  </div>\n  \n</div>\n<!-- /radios -->\n\n"
      }
    },
    {
      "value": "telefono",
      "text": "Por teléfono"
    }
  ]
}) }}

En línea con items condicionales

¿Cómo quieres que te contactemos?
Mostrar códigodel ejemplo: En línea con items condicionales

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "classes": "flex",
  "idPrefix": "inline-with-conditional",
  "name": "inline-with-conditional",
  "fieldset": {
    "legend": {
      "text": "¿Cómo quieres que te contactemos?"
    }
  },
  "items": [
    {
      "value": "correo-electronico",
      "text": "Correo electrónico",
      "classes": "mr-sm",
      "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": "telefono",
      "text": "Teléfono",
      "classes": "mr-sm",
      "checked": true,
      "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": "mensaje-SMS",
      "text": "Mensaje SMS",
      "classes": "mr-sm",
      "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"
      }
    }
  ]
}) }}

Con item condicional seleccionado

¿Cómo quieres que te contactemos?
Mostrar códigodel ejemplo: Con item condicional seleccionado

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "conditional-item-checked",
  "name": "conditional-item-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=\"telefono-4\">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-4\" name=\"telefono-name-4\" 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=\"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": "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"
      }
    }
  ]
}) }}

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

¿Cómo quieres que te contactemos?

Error:Error: Este campo no puede estar vacío

Mostrar códigodel ejemplo: Con clases opcionales del form-group mostrando un error del grupo

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "classes-group-error",
  "name": "classes-group-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=\"telefono-5\">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-5\" name=\"telefono-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-7\">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-7\" name=\"mobile-name-7\" type=\"text\">\n</div>\n<!-- /input -->\n"
      }
    }
  ]
}) }}

Peque

Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}

{{ componentRadios({
  "idPrefix": "small",
  "name": "peque",
  "classes": "c-radios--sm",
  "items": [
    {
      "value": "si",
      "text": "Si",
      "classes": "-mt-base",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "value": "no",
      "text": "No",
      "classes": "-mt-base",
      "label": {
        "classes": "text-sm -mt-1"
      }
    }
  ]
}) }}