DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Bloques de datos

Formularios

Son elementos de formulario estandarizados compuestos de varias entradas de texto agrupadas, las cuales comparten sentido semántico.

Input-group

Por defecto

Documento de identidad
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "doc-identidad-1",
  "namePrefix": "doc-identidad",
  "fieldset": {
    "legend": {
      "text": "Documento de identidad"
    }
  },
  "items": [
    {
      "name": "tipo-doc",
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-auto",
      "label": {
        "text": "Tipo"
      },
      "isSelect": true,
      "selectItems": [
        {
          "value": 1,
          "text": "NIF",
          "selected": true
        },
        {
          "value": 2,
          "text": "Pasaporte"
        }
      ]
    },
    {
      "name": "num-doc",
      "classes": "w-full lg:w-64",
      "label": {
        "text": "Número"
      },
      "placeholder": "Ej: 28999876V"
    }
  ]
}) }}

Con pista

Documento de identidad

Selecciona tu tipo de documento e introduce el número de documento sin espacios

Mostrar códigodel ejemplo: Con pista

Contenido

Nunjucks macro
{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "doc-identidad-2",
  "namePrefix": "doc-identidad",
  "fieldset": {
    "legend": {
      "text": "Documento de identidad"
    }
  },
  "hint": {
    "text": "Selecciona tu tipo de documento e introduce el número de documento sin espacios"
  },
  "items": [
    {
      "name": "tipo-doc",
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-auto",
      "label": {
        "text": "Tipo"
      },
      "isSelect": true,
      "selectItems": [
        {
          "value": 1,
          "text": "NIF",
          "selected": true
        },
        {
          "value": 2,
          "text": "Pasaporte"
        }
      ]
    },
    {
      "name": "num-doc",
      "classes": "w-full lg:w-64",
      "label": {
        "text": "Número"
      },
      "placeholder": "Ej: 28999876V"
    }
  ]
}) }}

Con divisor

Introduce cantidad
Mostrar códigodel ejemplo: Con divisor

Contenido

Nunjucks macro
{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "with-divider",
  "namePrefix": "with-divider",
  "fieldset": {
    "legend": {
      "text": "Introduce cantidad"
    }
  },
  "items": [
    {
      "name": "num-doc-A",
      "classes": "w-full lg:w-64 lg:flex-1",
      "formGroup": {
        "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base lg:mb-0"
      },
      "label": {
        "text": "Desde:",
        "classes": "lg:py-sm lg:mt-sm"
      },
      "placeholder": "Ej: 0"
    },
    {
      "divider": {
        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center ml-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg>",
        "classes": "hidden lg:block mt-sm"
      }
    },
    {
      "name": "num-doc-B",
      "classes": "w-full lg:w-64 lg:flex-1",
      "formGroup": {
        "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
      },
      "label": {
        "text": "Hasta:",
        "classes": "lg:py-sm lg:mt-sm"
      },
      "placeholder": "Ej: 600"
    }
  ],
  "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
}) }}

Con errores

Datos del solicitante

Necesitamos tus datos para identificarte posteriormente.

Error:El campo Nombre y el campo Apellidos no pueden estar vacíos.

Mostrar códigodel ejemplo: Con errores

Contenido

Nunjucks macro
{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "datos-errors",
  "fieldset": {
    "legend": {
      "text": "Datos del solicitante"
    }
  },
  "hint": {
    "text": "Necesitamos tus datos para identificarte posteriormente."
  },
  "errorMessage": {
    "text": "El campo Nombre y el campo Apellidos no pueden estar vacíos."
  },
  "items": [
    {
      "isSelect": true,
      "name": "titulo",
      "label": {
        "text": "Titulo"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-20",
      "selectItems": [
        {
          "value": 1,
          "text": "Sr.",
          "selected": true
        },
        {
          "value": 2,
          "text": "Sra."
        }
      ]
    },
    {
      "name": "nombre",
      "label": {
        "text": "Nombre"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "aria-describedby": "datos-errors-hint datos-errors-error",
        "aria-errormessage": "datos-errors-error",
        "aria-invalid": "true"
      }
    },
    {
      "name": "apellidos",
      "label": {
        "text": "Apellidos"
      },
      "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "aria-describedby": "datos-errors-hint datos-errors-error",
        "aria-errormessage": "datos-errors-error",
        "aria-invalid": "true"
      }
    }
  ]
}) }}

Con error en el nombre

Datos del solicitante

Necesitamos tus datos para identificarte posteriormente.

Error:El campo Nombre no puede estar vacío.

Mostrar códigodel ejemplo: Con error en el nombre

Contenido

Nunjucks macro
{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "datos-error-nombre-a",
  "fieldset": {
    "legend": {
      "text": "Datos del solicitante"
    }
  },
  "hint": {
    "text": "Necesitamos tus datos para identificarte posteriormente."
  },
  "errorMessage": {
    "text": "El campo Nombre no puede estar vacío."
  },
  "items": [
    {
      "isSelect": true,
      "name": "titulo",
      "label": {
        "text": "Titulo"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-20",
      "selectItems": [
        {
          "value": 1,
          "text": "Sr.",
          "selected": true
        },
        {
          "value": 2,
          "text": "Sra."
        }
      ]
    },
    {
      "name": "nombre",
      "label": {
        "text": "Nombre"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "aria-describedby": "datos-error-nombre-a-hint datos-error-nombre-a-error",
        "aria-errormessage": "datos-error-nombre-a-error",
        "aria-invalid": "true"
      }
    },
    {
      "name": "apellidos",
      "label": {
        "text": "Apellidos"
      },
      "classes": "w-full lg:w-auto"
    }
  ]
}) }}

Con error en los apellidos

Datos del solicitante

Necesitamos tus datos para identificarte posteriormente.

Error:El campo Apellidos no puede esta vacío.

Mostrar códigodel ejemplo: Con error en los apellidos

Contenido

Nunjucks macro
{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "datos-error-nombre-b",
  "fieldset": {
    "legend": {
      "text": "Datos del solicitante"
    }
  },
  "hint": {
    "text": "Necesitamos tus datos para identificarte posteriormente."
  },
  "errorMessage": {
    "text": "El campo Apellidos no puede esta vacío."
  },
  "items": [
    {
      "isSelect": true,
      "name": "titulo",
      "label": {
        "text": "Titulo"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-20",
      "selectItems": [
        {
          "value": 1,
          "text": "Sr.",
          "selected": true
        },
        {
          "value": 2,
          "text": "Sra."
        }
      ]
    },
    {
      "name": "nombre",
      "label": {
        "text": "Nombre"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-auto"
    },
    {
      "name": "apellidos",
      "label": {
        "text": "Apellidos"
      },
      "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "aria-describedby": "datos-error-nombre-b-hint datos-error-nombre-b-error",
        "aria-errormessage": "datos-error-nombre-b-error",
        "aria-invalid": "true"
      }
    }
  ]
}) }}

Con clases de form-group opcionales y más clases

Documento de identidad
Mostrar códigodel ejemplo: Con clases de form-group opcionales y más clases

Contenido

Nunjucks macro
{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "doc-identidad-classes",
  "namePrefix": "doc-identidad-classes",
  "fieldset": {
    "legend": {
      "text": "Documento de identidad",
      "classes": "c-h2"
    }
  },
  "formGroup": {
    "classes": "p-base bg-primary-light"
  },
  "classes": "grid grid-cols-2 gap-lg",
  "items": [
    {
      "name": "tipo-doc",
      "formGroup": {
        "classes": "lg:border-r lg:border-neutral-base mb-0"
      },
      "classes": "w-full lg:w-40",
      "label": {
        "text": "Tipo",
        "classes": "text-sm"
      },
      "isSelect": true,
      "selectItems": [
        {
          "value": 1,
          "text": "NIF",
          "selected": true
        },
        {
          "value": 2,
          "text": "Pasaporte"
        }
      ]
    },
    {
      "name": "num-doc",
      "classes": "w-full lg:w-64",
      "label": {
        "text": "Número",
        "classes": "text-sm"
      },
      "placeholder": "Ej: 28999876V"
    }
  ]
}) }}

Con autocompletado

Usa el parámetro autocomplete en los campos que piden datos del usuario para cumplir con las especificaciones de accesibilidad.

Datos del solicitante
Mostrar códigodel ejemplo: Con autocompletado

Contenido

Nunjucks macro
{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "datos-autocomplete",
  "fieldset": {
    "legend": {
      "text": "Datos del solicitante"
    }
  },
  "items": [
    {
      "isSelect": true,
      "name": "titulo",
      "label": {
        "text": "Titulo"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-20",
      "selectItems": [
        {
          "value": 1,
          "text": "Sr.",
          "selected": true
        },
        {
          "value": 2,
          "text": "Sra."
        }
      ]
    },
    {
      "name": "nombre",
      "label": {
        "text": "Nombre"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-auto",
      "autocomplete": "given-name"
    },
    {
      "name": "apellidos",
      "label": {
        "text": "Apellidos"
      },
      "classes": "w-full lg:w-auto",
      "autocomplete": "family-name"
    }
  ]
}) }}

Con atributos de input

Datos del solicitante
Mostrar códigodel ejemplo: Con atributos de input

Contenido

Nunjucks macro
{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "datos-attributes",
  "fieldset": {
    "legend": {
      "text": "Datos del solicitante"
    }
  },
  "items": [
    {
      "isSelect": true,
      "name": "titulo",
      "label": {
        "text": "Titulo"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-20",
      "attributes": {
        "data-title": "titulo"
      },
      "selectItems": [
        {
          "value": 1,
          "text": "Sr.",
          "selected": true
        },
        {
          "value": 2,
          "text": "Sra."
        }
      ]
    },
    {
      "name": "nombre",
      "label": {
        "text": "Nombre"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-auto",
      "attributes": {
        "data-name": "nombre"
      }
    },
    {
      "name": "apellidos",
      "label": {
        "text": "Apellidos"
      },
      "classes": "w-full lg:w-auto",
      "attributes": {
        "data-surname": "apellidos"
      }
    }
  ]
}) }}