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

<!-- radios -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="default-hint">
    <legend class="font-bold">
      ¿Quieres que te contactemos por correo electrónico?
    </legend>
    <!-- hint -->
    <p id="default-hint" class="block text-neutral-dark">Sólo puedes seleccionar un elemento.</p>
    <!-- /hint -->
    <div class="c-radios" data-module="c-radios">
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="por defecto" type="radio" value="si">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="default">Si</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
      <div class=" c-radios__conditional-active ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="por defecto" type="radio" value="no" checked>
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="default-2">No</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

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

<!-- radios -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="inline-hint">
    <legend class="font-bold">
      ¿Quieres que te contactemos por correo electrónico?
    </legend>
    <!-- hint -->
    <p id="inline-hint" class="block text-neutral-dark">Sólo puedes seleccionar un elemento.</p>
    <!-- /hint -->
    <div class="c-radios flex" data-module="c-radios">
      <div class=" mr-sm c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="inline" name="inline" type="radio" value="si">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="inline">Si</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
      <div class=" mr-sm c-radios__conditional-active ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="inline-2" name="inline" type="radio" value="no" checked>
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="inline-2">No</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

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

<!-- radios -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="example-disabled-hint">
    <legend class="font-bold">
      ¿Quieres que te contactemos por correo electrónico?
    </legend>
    <!-- hint -->
    <p id="example-disabled-hint" class="block text-neutral-dark">Sólo puedes seleccionar un elemento.</p>
    <!-- /hint -->
    <div class="c-radios" data-module="c-radios">
      <div class=" c-radios__conditional-active ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="example-disabled" name="example-disabled" type="radio" value="si" checked disabled>
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="example-disabled">Si</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="example-disabled-2" name="example-disabled" type="radio" value="no" disabled>
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="example-disabled-2">No</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

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

<!-- radios -->
<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">Selecciona una de las opciones.</p>
    <!-- /hint -->
    <div class="c-radios" data-module="c-radios">
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="radio" value="part-2" aria-describedby="legend-as-page-heading-item-hint">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="legend-as-page-heading">Por correo electrónico</label>
              <!-- /label -->
              <!-- hint -->
              <p id="legend-as-page-heading-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>
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="radio" value="part-3" aria-describedby="legend-as-page-heading-2-item-hint">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="legend-as-page-heading-2">Por correo postal</label>
              <!-- /label -->
              <!-- hint -->
              <p id="legend-as-page-heading-2-item-hint" class="block text-neutral-dark">Asegúrate de haber introducido correctamente tu dirección.</p>
              <!-- /hint -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

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

<!-- radios -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="medium-legend-hint">
    <legend class="c-h2">
      ¿Cómo prefieres que te contactemos?
    </legend>
    <!-- hint -->
    <p id="medium-legend-hint" class="block text-neutral-dark">Selecciona una de las opciones.</p>
    <!-- /hint -->
    <div class="c-radios" data-module="c-radios">
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="radio" value="part-2" aria-describedby="medium-legend-item-hint">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="medium-legend">Por correo electrónico</label>
              <!-- /label -->
              <!-- hint -->
              <p id="medium-legend-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>
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="radio" value="part-3" aria-describedby="medium-legend-2-item-hint">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="medium-legend-2">Por correo postal</label>
              <!-- /label -->
              <!-- hint -->
              <p id="medium-legend-2-item-hint" class="block text-neutral-dark">Asegúrate de haber introducido correctamente tu dirección.</p>
              <!-- /hint -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

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

<!-- radios -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      ¿Cómo prefieres que te contactemos?
    </legend>
    <div class="c-radios" data-module="c-radios">
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="example-divider" name="example-divider" type="radio" value="correo-electronico">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="example-divider">Correo electrónico</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="example-divider-2" name="example-divider" type="radio" value="correo-postal">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="example-divider-2">Correo postal</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
      <div class=" c-radios__conditional-hidden ">
        <div>
          <p>o bien</p>
        </div>
      </div>
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="example-divider-4" name="example-divider" type="radio" value="telefono">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="example-divider-4">Teléfono</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

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

<!-- radios -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      <h1>
        ¿Cómo prefieres que te contactemos?
      </h1>
    </legend>
    <div class="c-radios" data-module="c-radios">
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="hints-on-items" name="hints-on-items" type="radio" value="correo-electronico" aria-describedby="hints-on-items-item-hint">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="hints-on-items">Correo electrónico</label>
              <!-- /label -->
              <!-- hint -->
              <p id="hints-on-items-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>
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="hints-on-items-2" name="hints-on-items" type="radio" value="correo-postal" aria-describedby="hints-on-items-2-item-hint">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="hints-on-items-2">Correo postal</label>
              <!-- /label -->
              <!-- hint -->
              <p id="hints-on-items-2-item-hint" class="block text-neutral-dark">Asegúrate de haber introducido la dirección postal correctamente.</p>
              <!-- /hint -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

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

<!-- radios -->
<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">Sólo puedes elegir un elemento.</p>
    <!-- /hint -->
    <div class="c-radios" data-module="c-radios">
      <div class=" border-t border-b border-neutral-base -mb-px font-normal c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="has-dividers" name="has-dividers" type="radio" value="correo-electronico" aria-describedby="has-dividers-item-hint">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="has-dividers">Correo electrónico</label>
              <!-- /label -->
              <!-- hint -->
              <p id="has-dividers-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>
      <div class=" border-t border-b border-neutral-base -mb-px c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="has-dividers-2" name="has-dividers" type="radio" value="correo-postal" aria-describedby="has-dividers-2-item-hint">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="has-dividers-2">Correo postal</label>
              <!-- /label -->
              <!-- hint -->
              <p id="has-dividers-2-item-hint" class="block text-neutral-dark">Asegúrate de haber introducido la dirección postal correctamente.</p>
              <!-- /hint -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

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

<!-- radios -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      <h1>
        ¿Cómo prefieres que te contactemos?
      </h1>
    </legend>
    <div class="c-radios" data-module="c-radios">
      <div class=" bg-primary-light c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes" name="classes" type="radio" value="correo-electronico" aria-describedby="classes-item-hint">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="classes">Correo electrónico</label>
              <!-- /label -->
              <!-- hint -->
              <p id="classes-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>
      <div class=" bg-neutral-lighter c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes-2" name="classes" type="radio" value="correo-postal" aria-describedby="classes-2-item-hint">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="classes-2">Correo postal</label>
              <!-- /label -->
              <!-- hint -->
              <p id="classes-2-item-hint" class="block text-neutral-dark">Asegúrate de haber introducido la dirección postal correctamente.</p>
              <!-- /hint -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

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

<!-- radios -->
<div class="c-form-group">
  <div class="c-radios" data-module="c-radios">
    <div class=" c-radios__conditional-hidden ">
      <div>
        <div class="relative flex items-start py-base">
          <div class="flex items-center mx-sm">
            <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="radio" value="correo-electronico">
          </div>
          <div class="pt-0.5 leading-5">
            <!-- label -->
            <label class="block" for="without-fieldset">Correo electrónico</label>
            <!-- /label -->
          </div>
        </div>
      </div>
    </div>
    <div class=" c-radios__conditional-hidden ">
      <div>
        <div class="relative flex items-start py-base">
          <div class="flex items-center mx-sm">
            <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="radio" value="correp-postal">
          </div>
          <div class="pt-0.5 leading-5">
            <!-- label -->
            <label class="block" for="without-fieldset-2">Correo postal</label>
            <!-- /label -->
          </div>
        </div>
      </div>
    </div>
    <div class=" c-radios__conditional-hidden ">
      <div>
        <div class="relative flex items-start py-base">
          <div class="flex items-center mx-sm">
            <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="radio" value="telefono">
          </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>
</div>
<!-- /radios -->
            

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "fieldset-and-error",
  "name": "fieldset-and-error",
  "errorMessage": {
    "text": "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
    }
  ]
}) }}

<!-- radios -->
<div class="c-form-group c-form-group--error">
  <!-- fieldset -->
  <fieldset aria-errormessage="fieldset-and-error-error">
    <legend class="font-bold">
      ¿Quieres que te contactemos por correo electrónico?
    </legend>
    <!-- error-message -->
    <p id="fieldset-and-error-error" class="block font-semibold text-alert-base">
      <span class="sr-only">Error:</span>Tienes que seleccionar al menos una opción
    </p>
    <!-- /error-message -->
    <div class="c-radios" data-module="c-radios">
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="fieldset-and-error" name="fieldset-and-error" type="radio" value="si" aria-invalid="true">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="fieldset-and-error">Si</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
      <div class=" c-radios__conditional-active ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="fieldset-and-error-2" name="fieldset-and-error" type="radio" value="no" checked aria-invalid="true">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="fieldset-and-error-2">No</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

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

<!-- radios -->
<div class="c-form-group c-form-group--error">
  <!-- fieldset -->
  <fieldset aria-describedby="very-long-hint" aria-errormessage="very-long-error">
    <legend class="font-bold">
      Maecenas faucibus mollis interdum?
    </legend>
    <!-- hint -->
    <p id="very-long-hint" class="block text-neutral-dark">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <!-- /hint -->
    <!-- error-message -->
    <p id="very-long-error" class="block font-semibold text-alert-base">
      <span class="sr-only">Error:</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <!-- /error-message -->
    <div class="c-radios" data-module="c-radios">
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="very-long" name="very-long" type="radio" value="nullam" aria-invalid="true">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="very-long">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>
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="very-long-2" name="very-long" type="radio" value="aenean" aria-invalid="true">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="very-long-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>
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="very-long-3" name="very-long" type="radio" value="fusce" aria-invalid="true">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="very-long-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>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

{% 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": "<!-- 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",
      "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-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": "Sin conditional"
    }
  ]
}) }}

<!-- radios -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      ¿Cómo quieres que te contactemos?
    </legend>
    <div class="c-radios" data-module="c-radios">
      <div class=" c-radios__conditional c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-items" name="conditional-items" type="radio" value="correo-electronico" data-aria-controls="conditional-conditional-items">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="conditional-items">Correo electrónico</label>
              <!-- /label -->
            </div>
          </div>
        </div>
        <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-conditional-items">
          <!-- fieldset -->
          <fieldset>
            <legend class="mb-sm sr-only">
              ¿Cuál es tu número de teléfono móvil?
            </legend>
            <div class="c-form-group">
              <!-- 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-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">
              </div>
              <!-- /input -->
            </div>
          </fieldset>
          <!-- /fieldset -->
        </div>
      </div>
      <div class=" c-radios__conditional c-radios__conditional-active ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-items-2" name="conditional-items" type="radio" value="telefono" checked data-aria-controls="conditional-conditional-items-2">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="conditional-items-2">Teléfono</label>
              <!-- /label -->
            </div>
          </div>
        </div>
        <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-conditional-items-2">
          <!-- fieldset -->
          <fieldset>
            <legend class="mb-sm sr-only">
              ¿Cuál es tu número de teléfono fijo?
            </legend>
            <div class="c-form-group">
              <!-- input -->
              <div class="c-form-group">
                <!-- label -->
                <label class="block" for="telefono-2">Número de teléfono fijo</label>
                <!-- /label -->
                <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">
              </div>
              <!-- /input -->
            </div>
          </fieldset>
          <!-- /fieldset -->
        </div>
      </div>
      <div class=" c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-items-3" name="conditional-items" type="radio" value="mensaje-SMS">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="conditional-items-3">Sin conditional</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

{% 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": "<!-- 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-4\">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-4\" name=\"telefono-name-4\" 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\">\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": "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 -->"
      }
    }
  ]
}) }}

<!-- radios -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      ¿Cómo quieres que te contactemos?
    </legend>
    <div class="c-radios" data-module="c-radios">
      <div class=" c-radios__conditional c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-item-checked" name="conditional-item-checked" type="radio" value="correo-electronico" data-aria-controls="conditional-conditional-item-checked">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="conditional-item-checked">Correo electrónico</label>
              <!-- /label -->
            </div>
          </div>
        </div>
        <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-conditional-item-checked">
          <!-- fieldset -->
          <fieldset>
            <legend class="mb-sm sr-only">
              ¿Cuál es tu número de teléfono fijo?
            </legend>
            <div class="c-form-group">
              <!-- input -->
              <div class="c-form-group">
                <!-- label -->
                <label class="block" for="telefono-4">Número de teléfono fijo</label>
                <!-- /label -->
                <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-4" name="telefono-name-4" type="text">
              </div>
              <!-- /input -->
            </div>
          </fieldset>
          <!-- /fieldset -->
        </div>
      </div>
      <div class=" c-radios__conditional c-radios__conditional-active ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-item-checked-2" name="conditional-item-checked" type="radio" value="telefono" checked data-aria-controls="conditional-conditional-item-checked-2">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="conditional-item-checked-2">Teléfono</label>
              <!-- /label -->
            </div>
          </div>
        </div>
        <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-conditional-item-checked-2">
          <!-- fieldset -->
          <fieldset>
            <legend class="mb-sm sr-only">
              ¿Cuál es tu número de teléfono móvil?
            </legend>
            <div class="c-form-group">
              <!-- 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-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">
              </div>
              <!-- /input -->
            </div>
          </fieldset>
          <!-- /fieldset -->
        </div>
      </div>
      <div class=" c-radios__conditional c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-item-checked-3" name="conditional-item-checked" type="radio" value="mensaje-SMS" data-aria-controls="conditional-conditional-item-checked-3">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="conditional-item-checked-3">Mensaje SMS</label>
              <!-- /label -->
            </div>
          </div>
        </div>
        <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-conditional-item-checked-3">
          <!-- fieldset -->
          <fieldset>
            <legend class="mb-sm sr-only">
              ¿Cuál es tu número de teléfono móvil?
            </legend>
            <div class="c-form-group">
              <!-- 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-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">
              </div>
              <!-- /input -->
            </div>
          </fieldset>
          <!-- /fieldset -->
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

{% 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": "<!-- 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-5\">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-5\" name=\"telefono-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-7\">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-7\" name=\"mobile-name-7\" type=\"text\">\n  </div>\n  <!-- /input -->\n      </div>\n  </fieldset>\n<!-- /fieldset -->"
      }
    }
  ]
}) }}

<!-- radios -->
<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-radios" data-module="c-radios">
      <div class=" c-radios__conditional c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes-group-error" name="classes-group-error" type="radio" value="correo-electronico" data-aria-controls="conditional-classes-group-error">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="classes-group-error">Correo electrónico</label>
              <!-- /label -->
            </div>
          </div>
        </div>
        <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-classes-group-error">
          <!-- fieldset -->
          <fieldset>
            <legend class="mb-sm sr-only">
              ¿Cuál es tu número de teléfono fijo?
            </legend>
            <div class="c-form-group">
              <!-- input -->
              <div class="c-form-group">
                <!-- label -->
                <label class="block" for="telefono-5">Número de teléfono fijo</label>
                <!-- /label -->
                <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-5" name="telefono-name-5" type="text">
              </div>
              <!-- /input -->
            </div>
          </fieldset>
          <!-- /fieldset -->
        </div>
      </div>
      <div class=" c-radios__conditional c-radios__conditional-active ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes-group-error-2" name="classes-group-error" type="radio" value="telefono" checked data-aria-controls="conditional-classes-group-error-2">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="classes-group-error-2">Teléfono</label>
              <!-- /label -->
            </div>
          </div>
        </div>
        <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-classes-group-error-2">
          <!-- fieldset -->
          <fieldset>
            <legend class="mb-sm sr-only">
              ¿Cuál es tu número de teléfono móvil?
            </legend>
            <div class="c-form-group">
              <!-- 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>Este campo no puede estar vacío
                </p>
                <!-- /error-message -->
                <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">
              </div>
              <!-- /input -->
            </div>
          </fieldset>
          <!-- /fieldset -->
        </div>
      </div>
      <div class=" c-radios__conditional c-radios__conditional-hidden ">
        <div>
          <div class="relative flex items-start py-base">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes-group-error-3" name="classes-group-error" type="radio" value="mensaje-SMS" data-aria-controls="conditional-classes-group-error-3">
            </div>
            <div class="pt-0.5 leading-5">
              <!-- label -->
              <label class="block" for="classes-group-error-3">Mensaje SMS</label>
              <!-- /label -->
            </div>
          </div>
        </div>
        <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-classes-group-error-3">
          <!-- fieldset -->
          <fieldset>
            <legend class="mb-sm sr-only">
              ¿Cuál es tu número de teléfono móvil?
            </legend>
            <div class="c-form-group">
              <!-- input -->
              <div class="c-form-group">
                <!-- label -->
                <label class="block" for="mobile-7">Número de teléfono móvil</label>
                <!-- /label -->
                <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-7" name="mobile-name-7" type="text">
              </div>
              <!-- /input -->
            </div>
          </fieldset>
          <!-- /fieldset -->
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /radios -->
            

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

<!-- radios -->
<div class="c-form-group">
  <div class="c-radios c-radios--sm" data-module="c-radios">
    <div class=" -mt-base c-radios__conditional-hidden ">
      <div>
        <div class="relative flex items-start py-base">
          <div class="flex items-center mx-sm">
            <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="radio" value="si">
          </div>
          <div class="pt-0.5 leading-5">
            <!-- label -->
            <label class="block text-sm -mt-1" for="small">Si</label>
            <!-- /label -->
          </div>
        </div>
      </div>
    </div>
    <div class=" -mt-base c-radios__conditional-hidden ">
      <div>
        <div class="relative flex items-start py-base">
          <div class="flex items-center mx-sm">
            <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="radio" value="no">
          </div>
          <div class="pt-0.5 leading-5">
            <!-- label -->
            <label class="block text-sm -mt-1" for="small-2">No</label>
            <!-- /label -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /radios -->