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

Mostrar parámetros

Parámetros del componente

              params:
- name: id
  type: string
  required: true
  description: This is used for the main component and to compose id attribute for each item.
- name: namePrefix
  type: string
  required: false
  description: Optional prefix. This is used to prefix each `item.name` using `-`.
- name: items
  type: array
  required: true
  description: An array of input objects with name, value and classes.
  params:
  - name: id
    type: string
    required: false
    description: Item-specific id. If provided, it will be used instead of the generated id.
  - name: type
    type: string
    required: false
    description: Type of input control to render. Defaults to "text".
  - name: inputmode
    type: string
    require: false
    description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
  - name: value
    type: string
    required: false
    description: If provided, it will be used as the initial value of the input.
  - name: name
    type: string
    required: true
    description: Item-specific name attribute.
  - name: label
    type: object
    required: true
    description: Label text or HTML by specifying value for either text or html keys.
    isComponent: true
  - name: formGroup
    type: object
    required: false
    description: Options for the form-group wrapper
    params:
    - name: classes
      type: string
      required: false
      description: Classes to add to the form group.
  - name: autocomplete
    type: string
    required: false
    description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
  - name: pattern
    type: string
    required: false
    description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
  - name: placeholder
    type: string
    required: false
    description: Placeholder text
  - name: disabled
    type: boolean
    required: false
    description: If true, input will be disabled.
  - name: classes
    type: string
    required: false
    description: Classes to add to date input item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the date input tag.
  - name: isSelect
    type: boolean
    required: false
    description: If true, renders a select instead of an input
  - name: selectItems
    type: array
    required: false
    description: An array of select objects with name, value and classes.
  - name: divider
    type: object
    required: false
    description: Divider item that separates items.
    - name: text
      type: string
      required: true
      description: If `html` is set, this is not required. Text to use within the divider. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: true
      description: If `text` is set, this is not required. HTML to use within the divider. If `html` is provided, the `text` argument will be ignored.
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group) defaults to `flex`.
- name: fieldset
  type: object
  required: false
  description: Options for the fieldset component (e.g. legend).
  isComponent: true
- name: classes
  type: string
  required: false
  description: Classes to add to the date-input container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the date-input container.

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": [
    {
      "divider": {
        "text": "Desde:",
        "classes": "self-end mb-xl mr-base"
      }
    },
    {
      "name": "num-doc-A",
      "classes": "w-full lg:w-64",
      "label": {
        "text": "Cantidad inicio",
        "classes": "sr-only"
      },
      "placeholder": "Ej: 0"
    },
    {
      "divider": {
        "text": "hasta:",
        "classes": "self-end mb-xl mx-base"
      }
    },
    {
      "name": "num-doc-B",
      "classes": "w-full lg:w-64",
      "label": {
        "text": "Cantidad final",
        "classes": "sr-only"
      },
      "placeholder": "Ej: 600"
    }
  ]
}) }}

Con errores

Datos del solicitante

Necesitamos tus datos para identificarte posteriormente.

Error:Error: Estos campos 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": "Error: Estos campos 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:Error: Estos campos no pueden estar vacíos

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": "Error: Estos campos 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-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:Error: Estos campos no pueden estar vacíos

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": "Error: Estos campos 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-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

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