DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Domicilio postal

Cómo pedimos información

Calle, provincia y municipio.

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",
      "autocomplete": "address-line2"
    })  }}
  </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>

Cuándo lo utilizamos

Qué componentes utilizamos

Nos basamos en una reticula de 4 columnas en escritorio y un espaciado de 16 px para posicionar dos tipos de inputs:

En móviles los campos se apilan manteniendo las anchuras proporcionales a la longitud de los datos que se solicitan. Consulta el código para saber las clases y parámetros que utilizamos para la construcción de este patrón.

Accesibilidad

  • Los campos relacionados deben estar agrupados dentro de una etiqueta <fieldset>. Es obligatorio que tenga un elemento <legend> que describa el bloque (Domicilio postal). Es muy recomendable que el <legend> esté visible pero, excepcionalmente, podría ocultarse con el estilo .sr-only
  • El campo Vía debe tener el parámetro autocomplete= "address-line1".
  • El campo Indicaciones adicionales debe tener el parámetro autocomplete= "address-line2".
  • El campo Código Postal debe tener el parámetro autocomplete= "postal-code".
  • El selector Municipio se activa cuando se ha seleccionado una provincia.
  • Consulta la información sobre accesibilidad en formularios y en los componentes entrada de texto y selector.