DESY

Sistema de Diseño del Gobierno de Aragón.

Volver

Índice de páginas

Formularios

Patrones de componente

Los patrones de formularios se usan para solicitar a la persona usuaria diversos datos.

Índice de apartados de esta página

Barra de progreso

Divide el cumplimiento de un formulario en pasos más pequeños y ayuda a la persona usuaria a navegar entre ellos.

Tamaño base

Mostrar código del ejemplo: includes/_pattern.formularios-barra-progreso.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.formularios-barra-progreso.njk

<nav aria-label="Cronología de pasos del formulario">
  <ol class="flex lg:flex-row flex-col items-start lg:mx-xl mx-sm">
    <li>
      <div class="relative flex flex-col items-center overflow-visible">
        <a class="aspect-square rounded-full c-button flex justify-center" href="#"><span class="text-2xl">1</span><span class="sr-only">-</span><span class="absolute lg:top-14 lg:ml-0 ml-60 c-link font-normal lg:text-center text-start w-40">Paso anterior</span></a>
      </div>
    </li>
    <li class="lg:border-t-4 lg:border-l-0 border-l-4 border-primary-base lg:grow lg:my-6 h-lg lg:-mx-lg ml-5 overflow-hidden" role="separator" aria-hidden="true"></li>
    <li>
      <div class="relative flex flex-col items-center overflow-visible">
        <a class="aspect-square rounded-full c-button c-button--primary flex justify-center" href="#" aria-current="page"><span class="text-2xl">2</span><span class="sr-only">-</span><span class="absolute lg:top-14 lg:ml-0 ml-60 c-link font-bold lg:text-center text-start w-40">Paso actual</span></a>
      </div>
    </li>
    <li class="lg:border-t-4 lg:border-l-0 border-l-4 border-neutral-light lg:grow lg:my-6 h-lg lg:-mx-lg ml-5 overflow-hidden" role="separator" aria-hidden="true"></li>
    <li>
      <div class="relative flex flex-col items-center overflow-visible bg-white lg:w-12">
        <a class="aspect-square rounded-full c-button c-button--disabled disabled flex justify-center" href="#" aria-disabled="true" tabindex="-1"><span class="text-2xl">3</span><span class="sr-only">-</span><span class="absolute lg:top-14 lg:ml-0 ml-60 text-neutral-dark font-normal lg:text-center text-start w-40">Paso posterior</span></a>
      </div>
    </li>
  </ol>
</nav>

Tamaño pequeño

Mostrar código del ejemplo: includes/_pattern.formularios-barra-progreso-sm.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.formularios-barra-progreso-sm.njk

<nav aria-label="Cronología de pasos del formulario">
  <ol class="flex lg:flex-row flex-col items-start lg:mx-xl mx-xs">
    <li>
      <div class="relative flex flex-col items-center overflow-visible">
        <a class="aspect-square rounded-full c-button c-button--sm flex justify-center" href="#"><span>1</span><span class="sr-only">-</span><span class="absolute lg:top-10 lg:ml-0 ml-52 c-link text-sm font-normal lg:text-center text-start w-40">Paso anterior</span></a>
      </div>
    </li>
    <li class="lg:border-t-4 lg:border-l-0 border-l-4 border-primary-base lg:grow lg:my-3.5 h-lg lg:-mx-base ml-3 overflow-hidden" role="separator" aria-hidden="true"></li>
    <li>
      <div class="relative flex flex-col items-center overflow-visible">
        <a class="aspect-square rounded-full c-button c-button--primary c-button--sm flex justify-center" href="#" aria-current="page"><span>2</span><span class="sr-only">-</span><span class="absolute lg:top-10 lg:ml-0 ml-52 c-link text-sm font-bold lg:text-center text-start w-40">Paso actual</span></a>
      </div>
    </li>
    <li class="lg:border-t-4 lg:border-l-0 border-l-4 border-neutral-light lg:grow lg:my-3.5 h-lg lg:-mx-base ml-3 overflow-hidden" role="separator" aria-hidden="true"></li>
    <li>
      <div class="relative flex flex-col items-center overflow-visible bg-white">
        <a class="aspect-square rounded-full c-button c-button--sm c-button--disabled disabled flex justify-center" href="#" aria-disabled="true" tabindex="-1"><span>3</span><span class="sr-only">-</span><span class="absolute lg:top-10 lg:ml-0 ml-52 text-neutral-dark text-sm font-normal lg:text-center text-start w-40">Paso posterior</span></a>
      </div>
    </li>
  </ol>
</nav>

Datos de identidad: Nombre y nif

Solemos agrupar los elementos de los formularios en fieldsets que agrupen tipos de datos similares. En este caso nombre y nif.

Datos de identidad
Mostrar código del ejemplo: includes/_pattern.formularios-nombre-nif.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.formularios-nombre-nif.njk

{% from "components/input/_macro.input.njk" import componentInput %}
{% from "components/select/_macro.select.njk" import componentSelect %}

<fieldset>
  <legend class="sr-only">Datos de identidad</legend>
  {{ componentInput({
    "label": {
      "text": "Nombre y apellidos"
    },
    "id": "input-nombre",
    "name": "nombre",
    "classes": "w-full lg:w-2/5",
    "value": "Ana Pérez",
    "autocomplete": "name"
  })  }}
  {{ componentInput({
    "label": {
      "text": "NIF o NIE"
    },
    "id": "input-nif",
    "name": "nif",
    "attributes": {
        "size": "19"
    },
    "value": "234556789N",
    "autocomplete": "name"
  })  }}
</fieldset>

Datos de contacto: correo electrónico y teléfono

Solemos agrupar los elementos de los formularios en fieldsets que agrupen tipos de datos similares. En este caso correo electrónico y teléfono.

Datos de contacto
Mostrar código del ejemplo: includes/_pattern.formularios-correo-telefono.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.formularios-correo-telefono.njk

{% from "components/input/_macro.input.njk" import componentInput %}
{% from "components/select/_macro.select.njk" import componentSelect %}

<fieldset>
  <legend class="sr-only">Datos de contacto</legend>
  {{ componentInput({
    "label": {
      "text": "Correo electrónico (Obligatorio)"
    },
    "id": "input-email",
    "name": "email",
    "classes": "w-full lg:w-2/5",
    "value": "anaperez@gmail.com",
    "autocomplete": "email"
  })  }}
  {{ componentInput({
    "label": {
      "text": "Teléfono móvil (Obligatorio)"
    },
    "id": "input-movil",
    "name": "movil",
    "attributes": {
        "size": "19"
    },
    "value": "652 000 000",
    "autocomplete": "tel"
  })  }}
</fieldset>

Dirección postal completa

Si este patrón tiene excesivos elementos, puedes borrar los que no interesen y quedarte con una versión simplificada de él.

Domicilio postal
Mostrar código del ejemplo: includes/_pattern.formularios-direccion-postal.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.formularios-direccion-postal.njk

{% from "components/input/_macro.input.njk" import componentInput %}
{% from "components/select/_macro.select.njk" import componentSelect %}

<fieldset>
  <legend class="sr-only">Domicilio postal</legend>
  <div class="grid lg:grid-cols-4 gap-x-4">
    {{ componentSelect({
      "id": "select-tipo-via",
      "name": "tipo-via",
      "classes": "lg:w-full",
      "label": {
        "text": "Tipo de vía"
      },
      "items": [
        {
          "value": 1,
          "text": "Calle",
          "selected": true
        },
        {
          "value": 2,
          "text": "Paseo"
        },
        {
          "value": 3,
          "text": "Plaza"
        },
        {
          "value": 4,
          "text": "Avenida"
        }
      ]
    })  }}
    {{ componentInput({
      "formGroup": {
        "classes": "lg:col-span-3"
      },
      "label": {
        "text": "Vía"
      },
      "id": "input-nombre-via",
      "name": "nombre-via",
      "classes": "w-full",
      "autocomplete": "address-line1"
    })  }}
  </div>

  <div class="grid lg:grid-cols-4 gap-x-4">
    <div class="lg:col-span-2 grid grid-cols-4 gap-x-4">
      {{ componentInput({
        "label": {
          "text": "Número"
        },
        "id": "input-numero",
        "name": "numero",
        "classes": "w-full"
      })  }}
      {{ componentInput({
        "label": {
          "text": "Escalera"
        },
        "id": "input-escalera",
        "name": "escalera",
        "classes": "w-full"
      })  }}
      {{ componentInput({
        "label": {
          "text": "Piso"
        },
        "id": "input-piso",
        "name": "piso",
        "classes": "w-full"
      })  }}
      {{ componentInput({
        "label": {
          "text": "Puerta"
        },
        "id": "input-puerta",
        "name": "puerta",
        "classes": "w-full"
      })  }}
    </div>
    {{ componentInput({
      "formGroup": {
        "classes": "lg:col-span-2"
      },
      "label": {
        "text": "Indicaciones adicionales"
      },
      "id": "input-indicaciones",
      "name": "indicaciones",
      "classes": "w-full"
    })  }}
  </div>

  <div class="grid lg:grid-cols-5 gap-x-4">
    {{ componentInput({
      "label": {
        "text": "Código Postal"
      },
      "id": "input-cpostal",
      "name": "cpostal",
      "classes": "w-44 lg:w-full",
      "autocomplete": "postal-code"
    })  }}
    {{ componentSelect({
      "formGroup": {
          "classes": "lg:col-span-2"
        },
      "id": "select-provincia",
      "name": "provincia",
      "classes": "w-full",
      "label": {
        "text": "Provincia"
      },
      "items": [
        {
          "value": 0,
          "text": "Selecciona una opción",
          "selected": true,
          "disabled": true,
          "hidden": true
        },
        {
          "value": 1,
          "text": "Option 1"
        },
        {
          "value": 2,
          "text": "Option 2"
        },
        {
          "value": 3,
          "text": "Option 3"
        }
      ]
    })  }}
    {{ componentSelect({
      "formGroup": {
          "classes": "lg:col-span-2"
        },
      "id": "select-municipio",
      "name": "municipio",
      "classes": "w-full",
      "label": {
        "text": "Municipio"
      },
      "items": [
        {
          "value": 0,
          "text": "Selecciona una opción",
          "selected": true,
          "disabled": true,
          "hidden": true
        },
        {
          "value": 1,
          "text": "Option 1"
        },
        {
          "value": 2,
          "text": "Option 2"
        },
        {
          "value": 3,
          "text": "Option 3"
        }
      ],
      "disabled": true
    })  }}
  </div>
</fieldset>

Acepto políticas

Es común tener que aceptar obligatoriamente algún tipo de politica antes de permitir enviar un formulario.

Política de privacidad y protección de datos
Mostrar código del ejemplo: includes/_pattern.formularios-acepto-politica.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.formularios-acepto-politica.njk

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}

{{ componentCheckboxes({
  "idPrefix": "politicas-rgpd",
  "name": "check-politicas",
  "fieldset": {
    "legend": {
      "text": "Política de privacidad y protección de datos",
      "classes": "sr-only"
    }
  },
  "items": [
    {
      "value": "si",
      "html": 'Acepto la <a href="#" class="c-link">política de privacidad y la protección de datos</a>'
    }
  ]
})  }}