# Ejemplo de código de Bloques de datos. DESY. Sistema de diseño del Gobierno de Aragón.
## Componentes Índice de páginas
Componentes
# 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 Nunjucks del componente: "Input-group"
```yaml
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 [#](#por-defecto)
Mostrar códigodel ejemplo: Por defecto
#### Contenido
Nunjucks macro HTML
##### Nunjucks macro
```js
{% 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"
}
]
}) }}
```
##### HTML
```html
```
### Con pista [#](#con-pista)
Mostrar códigodel ejemplo: Con pista
#### Contenido
Nunjucks macro HTML
##### Nunjucks macro
```js
{% 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"
}
]
}) }}
```
##### HTML
```html