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.

Date-input

Por defecto

Descripción visual

Componente de fecha con tres campos de entrada separados para día, mes y año. Cada campo tiene borde gris claro de 1px y fondo blanco. Encabezado en negro con texto descriptivo gris pequeño debajo mostrando formato de ejemplo.

Fecha de nacimiento

Por ejemplo, día: 31 mes: 3 año: 1980

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim",
  "namePrefix": "fechnacim",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con errores solo

Descripción visual

Componente de fecha con tres campos de entrada separados para día, mes y año. Cada campo tiene borde rojo de 2px y fondo blanco. Encabezado en negro con mensaje de error en texto rojo pequeño debajo de los campos.

Fecha de nacimiento

Error:Aqui va un mensaje de error

Mostrar códigodel ejemplo: Con errores solo

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim-errors-a",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "errorMessage": {
    "text": "Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "hasErrors": true,
      "classes": "w-20  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con errores y pista

Descripción visual

Componente de fecha con tres campos de entrada separados para día, mes y año. Cada campo tiene borde rojo de 2px y fondo blanco. Encabezado en negro, texto descriptivo gris pequeño arriba de los campos, y mensaje de error en texto rojo pequeño debajo de los campos.

Fecha de nacimiento

Por ejemplo, día: 31 mes: 3 año: 1980

Error:Aqui va un mensaje de error

Mostrar códigodel ejemplo: Con errores y pista

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim-errors-b",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
  },
  "errorMessage": {
    "text": "Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "hasErrors": true,
      "classes": "w-20  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con error en el input del día

Descripción visual

Componente de fecha con tres campos de entrada alineados horizontalmente. El primer campo (día) tiene borde rojo de 2px, mientras los campos de mes y año tienen bordes grises estándar. Texto de error en rojo debajo de los campos, título negro en la parte superior, y subtexto gris claro que indica formato de ejemplo.

Fecha de nacimiento

Por ejemplo, día: 31 mes: 3 año: 1980

Error:Aqui va un mensaje de error

Mostrar códigodel ejemplo: Con error en el input del día

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim-day-error",
  "namePrefix": "fechnacim-day-error",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
  },
  "errorMessage": {
    "text": "Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con error en el input del mes

Descripción visual

Componente de fecha con tres campos de entrada alineados horizontalmente. El campo central (mes) tiene borde rojo de 2px, mientras los campos de día y año mantienen bordes grises estándar. Texto de error en rojo debajo de los campos, título negro en la parte superior, y subtexto gris claro que muestra ejemplo de formato.

Fecha de nacimiento

Por ejemplo, día: 31 mes: 3 año: 1980

Error:Aqui va un mensaje de error

Mostrar códigodel ejemplo: Con error en el input del mes

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim-month-error",
  "namePrefix": "fechnacim-month-error",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
  },
  "errorMessage": {
    "text": "Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con error en el input del año

Descripción visual

Componente de fecha con tres campos de entrada alineados horizontalmente. El tercer campo (año) presenta borde rojo de 2px, mientras los campos de día y mes conservan bordes grises estándar. Texto de error en rojo ubicado debajo de los campos, título negro en la parte superior, y subtexto gris claro indicando formato esperado.

Fecha de nacimiento

Por ejemplo, día: 31 mes: 3 año: 1980

Error:Aqui va un mensaje de error

Mostrar códigodel ejemplo: Con error en el input del año

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim-year-error",
  "namePrefix": "fechnacim-year-error",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
  },
  "errorMessage": {
    "text": "Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "hasErrors": true,
      "classes": "w-20  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con items por defecto

Descripción visual

Grupo de tres campos de entrada numéricos alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro, subtexto descriptivo gris con ejemplo de fecha, y tres labels grises pequeños ("Día", "Mes", "Año") sobre cada campo respectivo. Los campos tienen tamaño pequeño uniforme con esquinas redondeadas sutiles.

Fecha de nacimiento

Por ejemplo, día: 31 mes: 3 año: 1980

Mostrar códigodel ejemplo: Con items por defecto

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim-default-items",
  "namePrefix": "fechnacim-default-items",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
  }
}) }}

Input de tiempo

Descripción visual

Dos campos de entrada numéricos alineados horizontalmente con bordes grises de 1px y fondo blanco, separados por dos puntos negros. Encabezado principal en negrita negro, subtexto descriptivo gris con formato de ejemplo, y dos labels grises pequeños ("Hora", "Minutos") sobre cada campo. Los campos tienen ancho reducido con esquinas redondeadas sutiles.

Hora de publicación

Por ejemplo, 14:30

Mostrar códigodel ejemplo: Input de tiempo

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "time",
  "namePrefix": "time",
  "fieldset": {
    "legend": {
      "text": "Hora de publicación"
    }
  },
  "hint": {
    "text": "Por ejemplo, 14:30"
  },
  "items": [
    {
      "name": "hora",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "divider": {
        "text": ":",
        "classes": "flex items-end mb-sm mr-base"
      }
    },
    {
      "name": "minutos",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    }
  ]
}) }}

Con clases de form-group opcionales

Descripción visual

Grupo de tres campos de entrada numéricos con bordes grises de 1px sobre fondo azul celeste claro. Encabezado en negrita azul oscuro, subtexto descriptivo azul oscuro con ejemplo de fecha, y tres labels azul oscuro pequeños ("Día", "Mes", "Año") sobre campos de fondo blanco. Los campos tienen tamaño pequeño uniforme con esquinas redondeadas, contenidos en contenedor con padding generoso.

Fecha de nacimiento

Por ejemplo, día: 31 mes: 3 año: 1980

Mostrar códigodel ejemplo: Con clases de form-group opcionales

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim-formgroup-classes",
  "namePrefix": "fechnacim-formgroup-classes",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
  },
  "formGroup": {
    "classes": "p-base bg-primary-light"
  }
}) }}

Con valores de autocompletado

Descripción visual

Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en dos líneas. Labels "Día", "Mes", "Año" en negro arriba de cada campo respectivo.

Fecha de nacimiento

Por ejemplo, día: 31 mes: 3 año: 1980

Mostrar códigodel ejemplo: Con valores de autocompletado

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim-with-autocomplete-attribute",
  "namePrefix": "fechnacim-with-autocomplete",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "autocomplete": "bday-day",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "autocomplete": "bday-month",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "autocomplete": "bday-year",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con atributos de input

Descripción visual

Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en dos líneas. Labels "Día", "Mes", "Año" en negro arriba de cada campo respectivo.

Fecha de nacimiento

Por ejemplo, día: 31 mes: 3 año: 1980

Mostrar códigodel ejemplo: Con atributos de input

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim-with-input-attributes",
  "namePrefix": "fechnacim-with-input-attributes",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "data-example-day": "día",
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "data-example-month": "mes",
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "data-example-year": "año",
        "maxlength": "4"
      }
    }
  ]
}) }}

Peque

Descripción visual

Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en una línea. Labels "Día", "Mes", "Año" en negro arriba de cada campo respectivo.

Fecha de nacimiento

Por ejemplo, día: 31 mes: 3 año: 1980

Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim-small",
  "namePrefix": "fechnacim-small",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento",
      "classes": "text-sm font-bold"
    }
  },
  "hint": {
    "text": "Por ejemplo, día: 31 mes: 3 año: 1980",
    "classes": "text-sm"
  },
  "items": [
    {
      "name": "día",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Dia",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Mes",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "c-input--sm w-16 mt-xs",
      "label": {
        "text": "Año",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Input de tiempo peque

Descripción visual

Componente con encabezado "Input de tiempo peque" en fuente negra estándar. Contiene etiqueta "Hora de aplicación" en texto negro, ejemplo "Por ejemplo: 14:30" en gris, y dos campos de entrada pequeños con bordes grises de 1px y fondo blanco separados por dos puntos, etiquetados "Hora" y "Minutos" respectivamente en texto gris pequeño debajo de cada campo.

Hora de publicación

Por ejemplo, 14:30

Mostrar códigodel ejemplo: Input de tiempo peque

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}
{{ componentDateInput({
  "id": "fechnacim-small-time",
  "namePrefix": "fechnacim-small-time",
  "fieldset": {
    "legend": {
      "text": "Hora de publicación",
      "classes": "text-sm font-bold"
    }
  },
  "hint": {
    "text": "Por ejemplo, 14:30",
    "classes": "text-sm"
  },
  "items": [
    {
      "name": "hora",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Hora",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "divider": {
        "text": ":",
        "classes": "flex items-end mb-xs mr-base"
      }
    },
    {
      "name": "minutos",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Minutos",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    }
  ]
}) }}