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

Descripción visual

Sección con título en negrita negro arriba. Contiene label negro, dropdown con borde gris de 1px y fondo blanco, e input de texto con borde gris de 1px y fondo blanco mostrando placeholder. Los campos están alineados horizontalmente en una fila.

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

Descripción visual

Sección con título en negrita negro arriba seguido de texto descriptivo gris claro en dos líneas. Contiene label negro, dropdown con borde gris de 1px y fondo blanco, e input de texto con borde gris de 1px y fondo blanco mostrando placeholder. Los campos están alineados horizontalmente.

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

Descripción visual

Sección con título en negrita negro arriba y subtítulo negro debajo. Contiene label negro, input de texto con borde gris de 1px y fondo blanco, flecha negra como separador, otro label negro, e input de texto con borde gris de 1px y fondo blanco. Los elementos están alineados horizontalmente en secuencia.

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

Descripción visual

Formulario con encabezado negro, texto descriptivo gris, y mensaje de error en rojo indicando que dos campos no pueden estar vacíos. Tres campos de entrada: un dropdown con fondo gris claro, y dos campos de texto vacíos con bordes rojos de 2px. Labels en negro posicionados sobre cada campo.

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

Descripción visual

Formulario con encabezado negro, texto descriptivo gris, y mensaje de error en rojo indicando que un campo no puede estar vacío. Tres campos de entrada: un dropdown con fondo gris claro, un campo de texto vacío con borde rojo de 2px, y un campo de texto vacío con borde gris estándar. Labels en negro sobre cada campo.

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

Descripción visual

Formulario con encabezado negro, texto descriptivo gris, y mensaje de error en rojo indicando que un campo no puede estar vacío. Tres campos de entrada: un dropdown con fondo gris claro, un campo de texto vacío con borde gris estándar, y un campo de texto vacío con borde rojo de 2px. Labels en negro posicionados sobre cada campo respectivo.

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

Descripción visual

Sección con fondo azul claro conteniendo un formulario de documento de identidad. Incluye dropdown con fondo blanco y borde gris, campo de texto con placeholder numérico de ejemplo con borde gris. Labels en texto negro pequeño, disposición horizontal de los campos.

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.

Descripción visual

Formulario con fondo blanco y título h3 negro. Contiene dropdown "Sr." con borde gris oscuro, dos campos de texto rectangulares con bordes grises para nombre y apellidos. Labels en texto negro pequeño posicionados encima de cada campo, layout horizontal de inputs.

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

Descripción visual

Sección con fondo blanco y encabezado h3 en texto negro. Presenta dropdown "Sr." con borde gris oscuro de 1px, dos campos de entrada de texto blancos con bordes grises para datos personales. Labels negros pequeños sobre cada campo, disposición en fila de los elementos del formulario.

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