desy-html 16.0.3 → 17.0.0

package/src/templates/components/fieldset/_template.fieldset.njk

@@ -1,47 +1,47 @@
-<!-- fieldset -->
-<fieldset {%- if params.classes %} class="{{ params.classes }}"{% endif %}
-  {%- if params.role %} role="{{ params.role }}"{% endif %}
-  {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
-  {%- if params.errorId %} aria-errormessage="{{ params.errorId }}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {% if params.legend.html or params.legend.text %}
-  <legend class="{%- if params.legend.classes %}{{ params.legend.classes }}{% else %}font-bold{% endif %}">
-  {% if params.legend.isPageHeading %}
-    {% if params.headingLevel == "1" %}
-    <h1>
-      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
-    </h1>
-  {% elseif params.headingLevel == "2" %}
-    <h2>
-      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
-    </h2>
-  {% elseif params.headingLevel == "3" %}
-    <h3>
-      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
-    </h3>
-  {% elseif params.headingLevel == "4" %}
-    <h4>
-      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
-    </h4>
-  {% elseif params.headingLevel == "5" %}
-    <h5>
-      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
-    </h5>
-  {% else %}
-  {{ params.headingLevel }}
-    <h1>
-      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
-    </h1>
-  {% endif %}
-  {% else %}
-    {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
-  {% endif %}
-  </legend>
-  {% endif %}
-  {% if caller %}
-  {{ caller() | indent(2) }} {#- if statement allows usage of `call` to be optional -#}
-  {% elseif params.caller %}
-  {{ params.caller | safe | indent(2) }}
-  {% endif %}
-</fieldset>
+<!-- fieldset -->
+<fieldset {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+  {%- if params.role %} role="{{ params.role }}"{% endif %}
+  {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
+  {%- if params.errorId %} aria-errormessage="{{ params.errorId }}"{% endif %}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {% if params.legend.html or params.legend.text %}
+  <legend class="{%- if params.legend.classes %}{{ params.legend.classes }}{% else %}font-bold{% endif %}">
+  {% if params.legend.isPageHeading %}
+    {% if params.headingLevel == "1" %}
+    <h1>
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
+    </h1>
+  {% elseif params.headingLevel == "2" %}
+    <h2>
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
+    </h2>
+  {% elseif params.headingLevel == "3" %}
+    <h3>
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
+    </h3>
+  {% elseif params.headingLevel == "4" %}
+    <h4>
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
+    </h4>
+  {% elseif params.headingLevel == "5" %}
+    <h5>
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
+    </h5>
+  {% else %}
+  {{ params.headingLevel }}
+    <h1>
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
+    </h1>
+  {% endif %}
+  {% else %}
+    {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
+  {% endif %}
+  </legend>
+  {% endif %}
+  {% if caller %}
+  {{ caller() | indent(2) }} {#- if statement allows usage of `call` to be optional -#}
+  {% elseif params.caller %}
+  {{ params.caller | safe | indent(2) }}
+  {% endif %}
+</fieldset>
 <!-- /fieldset -->

package/src/templates/components/fieldset/params.fieldset.yaml

@@ -1,50 +1,50 @@
-params:
-- name: describedBy
-  type: string
-  required: false
-  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
-- name: errorId
-  type: string
-  required: false
-  description: One or more element IDs to add to the `aria-errormessage` attribute, used to provide additional error information for screenreader users.
-- name: legend
-  type: object
-  required: false
-  description: Options for the legend
-  params:
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the legend. 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 legend. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the legend.
-  - name: isPageHeading
-    type: boolean
-    required: false
-    description: Whether the legend also acts as the heading for the page.
-- name: headingLevel
-  type: number
-  required: false
-  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the fieldset container.
-- name: role
-  type: string
-  required: false
-  description: Optional ARIA role attribute.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the fieldset container.
-- name: caller
-  type: nunjucks-block
-  required: false
+params:
+- name: describedBy
+  type: string
+  required: false
+  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
+- name: errorId
+  type: string
+  required: false
+  description: One or more element IDs to add to the `aria-errormessage` attribute, used to provide additional error information for screenreader users.
+- name: legend
+  type: object
+  required: false
+  description: Options for the legend
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the legend. 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 legend. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the legend.
+  - name: isPageHeading
+    type: boolean
+    required: false
+    description: Whether the legend also acts as the heading for the page.
+- name: headingLevel
+  type: number
+  required: false
+  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the fieldset container.
+- name: role
+  type: string
+  required: false
+  description: Optional ARIA role attribute.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the fieldset container.
+- name: caller
+  type: nunjucks-block
+  required: false
   description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fielset component in a `call` block.

package/src/templates/components/file-upload/_examples.file-upload.njk

@@ -1,104 +1,104 @@
-{% set exampleComponent = "file-upload" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "id": "file-upload-1",
-      "name": "file-upload-1",
-      "label": {
-        "text": "Sube un archivo"
-      },
-      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
-    },
-    "visualDescription": "Sección con título negro en la parte superior, seguido de texto explicativo gris oscuro. Botón blanco con texto negro y borde gris de 1px, acompañado de texto gris indicando que no hay archivo seleccionado. Fondo blanco con borde gris claro de 1px rodeando toda la sección.",
-    "_generated": {
-      "hash": "0e810d50efe022882477a15a778bce18",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:57:48.831Z"
-    }
-  },
-  {
-    "name": "con pista",
-    "data": {
-      "id": "file-upload-2",
-      "name": "file-upload-2",
-      "label": {
-        "text": "Sube una foto"
-      },
-      "hint": {
-        "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
-      },
-      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
-    },
-    "visualDescription": "Sección con título negro en la parte superior, seguido de dos líneas de texto gris oscuro que proporcionan información adicional. Botón blanco con texto negro y borde gris de 1px, acompañado de texto gris indicando que no hay archivo seleccionado. Fondo blanco con borde gris claro de 1px rodeando toda la sección.",
-    "_generated": {
-      "hash": "d08747be7a78b609f77b628b292f43fd",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:57:48.831Z"
-    }
-  },
-  {
-    "name": "con mensaje de error",
-    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
-    "data": {
-      "id": "file-upload-3",
-      "name": "file-upload-3",
-      "label": {
-        "text": "Sube un archivo"
-      },
-      "hint": {
-        "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
-      },
-      "errorMessage": {
-        "text": "Esto es un mensaje de error"
-      },
-      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
-    },
-    "visualDescription": "Sección con título negro en la parte superior, seguido de texto explicativo gris oscuro y una línea de texto rojo intenso. Botón blanco con texto negro y borde gris de 1px, acompañado de texto gris indicando que no hay archivo seleccionado. Fondo blanco con borde gris claro de 1px rodeando toda la sección.",
-    "_generated": {
-      "hash": "fe359b08f73f8e80f6e4f924caadd7fc",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:57:48.831Z"
-    }
-  },
-  {
-    "name": "con atributos",
-    "data": {
-      "id": "file-upload-4",
-      "name": "file-upload-4",
-      "label": {
-        "text": "Sube una foto"
-      },
-      "attributes": {
-        "accept": ".jpg, .jpeg, .png"
-      },
-      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
-    },
-    "visualDescription": "Componente de carga de archivos con label en texto negro estándar. Incluye botón con fondo gris claro y borde redondeado, seguido de texto en gris indicando estado. Contenedor con borde gris claro de 1px y fondo blanco, padding interno moderado.",
-    "_generated": {
-      "hash": "183ce2d019b58e65fe1a9ac2431c14f3",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:57:57.742Z"
-    }
-  },
-  {
-    "name": "con clases de form-group opcionales",
-    "data": {
-      "id": "file-upload-6",
-      "name": "file-upload-6",
-      "label": {
-        "text": "Sube un archivo"
-      },
-      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none",
-      "formGroup": {
-        "classes": "p-base bg-warning-light"
-      }
-    },
-    "visualDescription": "Componente de carga de archivos dentro de contenedor con fondo amarillo claro y borde gris de 1px. Label en texto negro estándar sobre el control. Botón con fondo azul y texto blanco, seguido de texto en gris indicando estado, todo con padding generoso dentro del área amarilla.",
-    "_generated": {
-      "hash": "c1c13548fa11f2991cee85d1ce6ee8b0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:57:57.742Z"
-    }
-  }
+{% set exampleComponent = "file-upload" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "id": "file-upload-1",
+      "name": "file-upload-1",
+      "label": {
+        "text": "Sube un archivo"
+      },
+      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
+    },
+    "visualDescription": "Sección con título negro en la parte superior, seguido de texto explicativo gris oscuro. Botón blanco con texto negro y borde gris de 1px, acompañado de texto de estado. Fondo blanco con borde gris claro de 1px rodeando toda la sección.",
+    "_generated": {
+      "hash": "0e810d50efe022882477a15a778bce18",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:48.831Z"
+    }
+  },
+  {
+    "name": "con pista",
+    "data": {
+      "id": "file-upload-2",
+      "name": "file-upload-2",
+      "label": {
+        "text": "Sube una foto"
+      },
+      "hint": {
+        "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
+      },
+      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
+    },
+    "visualDescription": "Sección con título negro en la parte superior, seguido de dos líneas de texto gris oscuro que proporcionan información adicional. Botón blanco con texto negro y borde gris de 1px, acompañado de texto de estado. Fondo blanco con borde gris claro de 1px rodeando toda la sección.",
+    "_generated": {
+      "hash": "d08747be7a78b609f77b628b292f43fd",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:48.831Z"
+    }
+  },
+  {
+    "name": "con mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
+    "data": {
+      "id": "file-upload-3",
+      "name": "file-upload-3",
+      "label": {
+        "text": "Sube un archivo"
+      },
+      "hint": {
+        "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
+      },
+      "errorMessage": {
+        "text": "Esto es un mensaje de error"
+      },
+      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
+    },
+    "visualDescription": "Sección con título negro en la parte superior, seguido de texto explicativo gris oscuro y una línea de texto rojo intenso. Botón blanco con texto negro y borde gris de 1px, acompañado de texto de estado. Fondo blanco con borde gris claro de 1px rodeando toda la sección.",
+    "_generated": {
+      "hash": "fe359b08f73f8e80f6e4f924caadd7fc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:48.831Z"
+    }
+  },
+  {
+    "name": "con atributos",
+    "data": {
+      "id": "file-upload-4",
+      "name": "file-upload-4",
+      "label": {
+        "text": "Sube una foto"
+      },
+      "attributes": {
+        "accept": ".jpg, .jpeg, .png"
+      },
+      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
+    },
+    "visualDescription": "Componente de carga de archivos con label en texto negro estándar. Incluye botón con fondo gris claro y borde redondeado, seguido de texto en gris indicando estado. Contenedor con borde gris claro de 1px y fondo blanco, padding interno moderado.",
+    "_generated": {
+      "hash": "183ce2d019b58e65fe1a9ac2431c14f3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:57.742Z"
+    }
+  },
+  {
+    "name": "con clases de form-group opcionales",
+    "data": {
+      "id": "file-upload-6",
+      "name": "file-upload-6",
+      "label": {
+        "text": "Sube un archivo"
+      },
+      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none",
+      "formGroup": {
+        "classes": "p-base bg-warning-light"
+      }
+    },
+    "visualDescription": "Componente de carga de archivos dentro de contenedor con fondo amarillo claro y borde gris de 1px. Label en texto negro estándar sobre el control. Botón con fondo azul y texto blanco, seguido de texto en gris indicando estado, todo con padding generoso dentro del área amarilla.",
+    "_generated": {
+      "hash": "c1c13548fa11f2991cee85d1ce6ee8b0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:57:57.742Z"
+    }
+  }
 ] %}

package/src/templates/components/file-upload/_macro.file-upload.njk

@@ -1,3 +1,3 @@
-{% macro componentFileUpload(params) %}
-{% include "./_template.file-upload.njk" %}
+{% macro componentFileUpload(params) %}
+{% include "./_template.file-upload.njk" %}
 {% endmacro %}

package/src/templates/components/file-upload/_template.file-upload.njk

@@ -1,46 +1,46 @@
-{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
-{% from "../hint/_macro.hint.njk" import componentHint %}
-{% from "../label/_macro.label.njk" import componentLabel %}
-
-{#- a record of other elements that we need to associate with the input using
-   aria-describedby – for example hints or error messages -#}
-{% set describedBy = params.describedBy if params.describedBy else "" %}
-<!-- file-upload -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {{ componentLabel({
-    html: params.label.html,
-    text: params.label.text,
-    classes: params.label.classes,
-    isPageHeading: params.label.isPageHeading,
-    attributes: params.label.attributes,
-    for: params.id
-  }) | indent(2) | trim }}
-{% if params.hint %}
-  {% set hintId = params.id + '-hint' %}
-  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
-  {{ componentHint({
-    id: hintId,
-    classes: params.hint.classes,
-    attributes: params.hint.attributes,
-    html: params.hint.html,
-    text: params.hint.text
-  }) | indent(2) | trim }}
-{% endif %}
-{% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
-  {{ componentErrorMessage({
-    id: errorId,
-    classes: params.errorMessage.classes,
-    attributes: params.errorMessage.attributes,
-    html: params.errorMessage.html,
-    text: params.errorMessage.text,
-    visuallyHiddenText: params.errorMessage.visuallyHiddenText
-  }) | indent(2) | trim }}
-{% endif %}
-  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} c-file-upload--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="file"
-  {%- if params.value %} value="{{ params.value }}"{% endif %}
-  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-  {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-</div>
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../hint/_macro.hint.njk" import componentHint %}
+{% from "../label/_macro.label.njk" import componentLabel %}
+
+{#- a record of other elements that we need to associate with the input using
+   aria-describedby – for example hints or error messages -#}
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+<!-- file-upload -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {{ componentLabel({
+    html: params.label.html,
+    text: params.label.text,
+    classes: params.label.classes,
+    isPageHeading: params.label.isPageHeading,
+    attributes: params.label.attributes,
+    for: params.id
+  }) | indent(2) | trim }}
+{% if params.hint %}
+  {% set hintId = params.id + '-hint' %}
+  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+  {{ componentHint({
+    id: hintId,
+    classes: params.hint.classes,
+    attributes: params.hint.attributes,
+    html: params.hint.html,
+    text: params.hint.text
+  }) | indent(2) | trim }}
+{% endif %}
+{% if params.errorMessage %}
+  {% set errorId = params.id + '-error' %}
+  {{ componentErrorMessage({
+    id: errorId,
+    classes: params.errorMessage.classes,
+    attributes: params.errorMessage.attributes,
+    html: params.errorMessage.html,
+    text: params.errorMessage.text,
+    visuallyHiddenText: params.errorMessage.visuallyHiddenText
+  }) | indent(2) | trim }}
+{% endif %}
+  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} c-file-upload--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="file"
+  {%- if params.value %} value="{{ params.value }}"{% endif %}
+  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+</div>
 <!-- /file-upload -->

package/src/templates/components/file-upload/params.file-upload.yaml

@@ -1,49 +1,49 @@
-params:
-- name: name
-  type: string
-  required: true
-  description: The name of the input, which is submitted with the form data.
-- name: id
-  type: string
-  required: true
-  description: The id of the input
-- name: value
-  type: string
-  required: false
-  description: Optional initial value of the input
-- name: describedBy
-  type: string
-  required: false
-  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
-- name: label
-  type: object
-  required: true
-  description: Options for the label component.
-  isComponent: true
-- 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)
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the file upload component.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: name
+  type: string
+  required: true
+  description: The name of the input, which is submitted with the form data.
+- name: id
+  type: string
+  required: true
+  description: The id of the input
+- name: value
+  type: string
+  required: false
+  description: Optional initial value of the input
+- name: describedBy
+  type: string
+  required: false
+  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
+- name: label
+  type: object
+  required: true
+  description: Options for the label component.
+  isComponent: true
+- 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)
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the file upload component.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the file upload component.