DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Entrada de texto

Formularios

El campo de texto es un elemento básico de formulario que permite la inserción y edición de texto en una única línea. Se debe usar cuando el texto a introducir es corto, por ejemplo nombre o apellidos. Para textos largos usar áreas de texto.

Input

Parámetros Nunjucks del componente: "Input". Versión: 4.0.0

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: id\n  type: string\n  required: true\n  description: The id of the input.\n- name: name\n  type: string\n  required: true\n  description: The name of the input, which is submitted with the form data.\n- name: type\n  type: string\n  required: false\n  description: Type of input control to render. Defaults to \"text\".\n- name: inputmode\n  type: string\n  require: false\n  description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).\n- name: value\n  type: string\n  required: false\n  description: Optional initial value of the input.\n- name: describedBy\n  type: string\n  required: false\n  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.\n- name: label\n  type: object\n  required: true\n  description: Options for the label component.\n  isComponent: true\n- name: hint\n  type: object\n  required: false\n  description: Options for the hint component.\n  isComponent: true\n- name: errorMessage\n  type: object\n  required: false\n  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`.\n  isComponent: true\n- name: errorId\n  type: string\n  required: false\n  description: Custom ID to add to the `aria-errormessage` attribute, used to provide additional descriptive information for screenreader users. Used in date-input component with errors.\n- name: describedBy\n  type: string\n  required: false\n  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.\n- name: formGroup\n  type: object\n  required: false\n  description: Options for the form-group wrapper\n  params:\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the form group (e.g. to show error state for the whole group)\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the input.\n- name: autocomplete\n  type: string\n  required: false\n  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.\n- name: pattern\n  type: string\n  required: false\n  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.\n- name: placeholder\n  type: string\n  required: false\n  description: Placeholder text\n- name: disabled\n  type: boolean\n  required: false\n  description: If true, input will be disabled.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the anchor tag.","length":3028}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-example-a">Esto es un label</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="input-example-a" name="test-name" type="text">
</div>
<!-- /input -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "input-example-a",
  "name": "test-name"
}) }}
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "input-example-a",
  "name": "test-name"
}) }}

Deshabilitado

Ejemplo: "Deshabilitado", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-example-b">Esto es un label</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="input-example-b" name="test-name" type="text" disabled>
</div>
<!-- /input -->

Ejemplo: "Deshabilitado", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "input-example-b",
  "name": "test-name",
  "disabled": true
}) }}
Mostrar códigodel ejemplo: Deshabilitado

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "input-example-b",
  "name": "test-name",
  "disabled": true
}) }}

Con pista

Ejemplo: "Con pista", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-hint-text">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-hint-text-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="input-with-hint-text" name="test-name" type="text" aria-describedby="input-with-hint-text-hint">
</div>
<!-- /input -->

Ejemplo: "Con pista", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-hint-text",
  "name": "test-name"
}) }}

Esto es una pista.

Mostrar códigodel ejemplo: Con pista

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-hint-text",
  "name": "test-name"
}) }}

Con mensaje de error

Ejemplo: "Con mensaje de error", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="input-with-error-message-a">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-error-message-a-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="input-with-error-message-a-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base " id="input-with-error-message-a" name="test-name" type="text" aria-describedby="input-with-error-message-a-hint input-with-error-message-a-error" aria-errormessage="input-with-error-message-a-error" aria-invalid="true">
</div>
<!-- /input -->

Ejemplo: "Con mensaje de error", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-error-message-a",
  "name": "test-name",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

Esto es una pista.

Error:Error: esto es un mensaje de error

Mostrar códigodel ejemplo: Con mensaje de error

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-error-message-a",
  "name": "test-name",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

Con mensaje de error con id personalizado

Ejemplo: "Con mensaje de error con id personalizado", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="input-with-error-message-b">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-error-message-b-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="custom-error-id" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base " id="input-with-error-message-b" name="test-name" type="text" aria-describedby="input-with-error-message-b-hint" aria-errormessage="custom-error-id" aria-invalid="true">
</div>
<!-- /input -->

Ejemplo: "Con mensaje de error con id personalizado", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-error-message-b",
  "name": "test-name",
  "errorId": "custom-error-id",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

Esto es una pista.

Error:Error: esto es un mensaje de error

Mostrar códigodel ejemplo: Con mensaje de error con id personalizado

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-error-message-b",
  "name": "test-name",
  "errorId": "custom-error-id",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

Con clase de anchura completa

Este ejemplo usa todo el ancho disponible. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.

Ejemplo: "Con clase de anchura completa", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-width-full">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-width-full-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="input-width-full" name="test-width-full" type="text" aria-describedby="input-width-full-hint">
</div>
<!-- /input -->

Ejemplo: "Con clase de anchura completa", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-width-full",
  "name": "test-width-full",
  "classes": "w-full"
}) }}

Esto es una pista.

Mostrar códigodel ejemplo: Con clase de anchura completa

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-width-full",
  "name": "test-width-full",
  "classes": "w-full"
}) }}

Con clase de anchura 1/2

Este ejemplo usa la mitad del ancho disponible por su contenedor. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.

Ejemplo: "Con clase de anchura 1/2", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-width-half">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-width-half-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-1/2" id="input-width-half" name="test-width-half" type="text" aria-describedby="input-width-half-hint">
</div>
<!-- /input -->

Ejemplo: "Con clase de anchura 1/2", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-width-half",
  "name": "test-width-half",
  "classes": "w-1/2"
}) }}

Esto es una pista.

Mostrar códigodel ejemplo: Con clase de anchura 1/2

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-width-half",
  "name": "test-width-half",
  "classes": "w-1/2"
}) }}

Con clase width-32

Este ejemplo usa una anchura predefinida de DESY. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles

Ejemplo: "Con clase width-32", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-width-32">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-width-32-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-32" id="input-width-32" name="test-width-32" type="text" aria-describedby="input-width-32-hint">
</div>
<!-- /input -->

Ejemplo: "Con clase width-32", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-width-32",
  "name": "test-width-32",
  "classes": "w-32"
}) }}

Esto es una pista.

Mostrar códigodel ejemplo: Con clase width-32

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-width-32",
  "name": "test-width-32",
  "classes": "w-32"
}) }}

Con label como encabezado

Ejemplo: "Con label como encabezado", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <h1 class="block ">
    <label class="block" for="input-with-page-heading">Esto es un label</label>
  </h1>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="input-with-page-heading" name="test-name" type="text">
</div>
<!-- /input -->

Ejemplo: "Con label como encabezado", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label",
    "isPageHeading": true
  },
  "id": "input-with-page-heading",
  "name": "test-name"
}) }}

Mostrar códigodel ejemplo: Con label como encabezado

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label",
    "isPageHeading": true
  },
  "id": "input-with-page-heading",
  "name": "test-name"
}) }}

Con clases de form-group opcionales

Ejemplo: "Con clases de form-group opcionales", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group p-base bg-primary-light">
  <!-- label -->
  <label class="block" for="input-example-c">Esto es un label</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="input-example-c" name="test-name" type="text">
</div>
<!-- /input -->

Ejemplo: "Con clases de form-group opcionales", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "input-example-c",
  "name": "test-name",
  "formGroup": {
    "classes": "p-base bg-primary-light"
  }
}) }}
Mostrar códigodel ejemplo: Con clases de form-group opcionales

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "input-example-c",
  "name": "test-name",
  "formGroup": {
    "classes": "p-base bg-primary-light"
  }
}) }}

Con valores de autocompletado

Ejemplo: "Con valores de autocompletado", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-autocomplete-attribute">Código postal</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="input-with-autocomplete-attribute" name="postcode" type="text" autocomplete="postal-code">
</div>
<!-- /input -->

Ejemplo: "Con valores de autocompletado", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Código postal"
  },
  "id": "input-with-autocomplete-attribute",
  "name": "postcode",
  "autocomplete": "postal-code"
}) }}
Mostrar códigodel ejemplo: Con valores de autocompletado

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Código postal"
  },
  "id": "input-with-autocomplete-attribute",
  "name": "postcode",
  "autocomplete": "postal-code"
}) }}

Con al atributo pattern

Usa el atributo pattern para elegir un patrón de entrada de datos nativo del navegador.

Ejemplo: "Con al atributo pattern", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-pattern-attribute">Solo números</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="input-with-pattern-attribute" name="numbers-only" type="tel" pattern="[0-9]*">
</div>
<!-- /input -->

Ejemplo: "Con al atributo pattern", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Solo números"
  },
  "id": "input-with-pattern-attribute",
  "name": "numbers-only",
  "type": "tel",
  "pattern": "[0-9]*"
}) }}
Mostrar códigodel ejemplo: Con al atributo pattern

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Solo números"
  },
  "id": "input-with-pattern-attribute",
  "name": "numbers-only",
  "type": "tel",
  "pattern": "[0-9]*"
}) }}

Campo obligatorio

El formulario debe comenzar con un párrafo que ponga: * Todos los campos marcados con asterisco son obligatorios.

Ejemplo: "Campo obligatorio", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-required-attribute">Campo obligatorio *</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="input-with-required-attribute" name="input-with-required-attribute" type="text" required="">
</div>
<!-- /input -->

Ejemplo: "Campo obligatorio", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Campo obligatorio *"
  },
  "id": "input-with-required-attribute",
  "name": "input-with-required-attribute",
  "attributes": {
    "required": ""
  }
}) }}
Mostrar códigodel ejemplo: Campo obligatorio

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Campo obligatorio *"
  },
  "id": "input-with-required-attribute",
  "name": "input-with-required-attribute",
  "attributes": {
    "required": ""
  }
}) }}

Peque

Ejemplo: "Peque", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="classes-applied-a">Input peque</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-input--sm" id="classes-applied-a" name="classes-applied-a" type="text">
</div>
<!-- /input -->

Ejemplo: "Peque", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Input peque"
  },
  "id": "classes-applied-a",
  "name": "classes-applied-a",
  "classes": "c-input--sm"
}) }}
Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Input peque"
  },
  "id": "classes-applied-a",
  "name": "classes-applied-a",
  "classes": "c-input--sm"
}) }}

Con clases de css aplicadas

Label en linea + Input flexible y mensaje de error

Ejemplo: "Con clases de css aplicadas", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group c-form-group--error lg:flex lg:flex-wrap lg:items-center lg:gap-x-base">
  <!-- label -->
  <label class="block lg:py-sm lg:mt-sm" for="classes-applied-b">Label en línea:</label>
  <!-- /label -->
  <!-- error-message -->
  <p id="classes-applied-b-error" class="block font-semibold text-alert-base order-1 w-full pt-sm">
    <span class="sr-only">Error:</span>Error: Esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base lg:flex-1 border-alert-base ring-2 ring-alert-base " id="classes-applied-b" name="classes-applied-b" type="text" aria-describedby="classes-applied-b-error" aria-errormessage="classes-applied-b-error" aria-invalid="true">
</div>
<!-- /input -->

Ejemplo: "Con clases de css aplicadas", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
  },
  "label": {
    "text": "Label en línea:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "id": "classes-applied-b",
  "name": "classes-applied-b",
  "errorMessage": {
    "text": "Error: Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}

Error:Error: Esto es un mensaje de error

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
  },
  "label": {
    "text": "Label en línea:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "id": "classes-applied-b",
  "name": "classes-applied-b",
  "errorMessage": {
    "text": "Error: Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}

Tipo personalizado

Si no se espacifica, el tipo por defecto es text. Este Input tiene un type='number'

Ejemplo: "Tipo personalizado", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="custom-type">Input de tipo número</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="custom-type" name="custom-type" type="number">
</div>
<!-- /input -->

Ejemplo: "Tipo personalizado", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Input de tipo número"
  },
  "id": "custom-type",
  "name": "custom-type",
  "type": "number"
}) }}
Mostrar códigodel ejemplo: Tipo personalizado

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Input de tipo número"
  },
  "id": "custom-type",
  "name": "custom-type",
  "type": "number"
}) }}

Valor

Ejemplo: "Valor", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="value">Esto es un label</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="value" name="valor" type="text" value="Esto es un valor">
</div>
<!-- /input -->

Ejemplo: "Valor", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "value",
  "name": "valor",
  "value": "Esto es un valor"
}) }}
Mostrar códigodel ejemplo: Valor

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "value",
  "name": "valor",
  "value": "Esto es un valor"
}) }}

Placeholder

Ejemplo: "Placeholder", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="con-placeholder">Esto es un label</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="con-placeholder" name="placeholder" type="text" placeholder="Esto es un placeholder">
</div>
<!-- /input -->

Ejemplo: "Placeholder", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "con-placeholder",
  "name": "placeholder",
  "placeholder": "Esto es un placeholder"
}) }}
Mostrar códigodel ejemplo: Placeholder

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "con-placeholder",
  "name": "placeholder",
  "placeholder": "Esto es un placeholder"
}) }}

Con describedby

Ejemplo: "Con describedby", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="with-describedby-a">Con describedBy</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="with-describedby-a" name="with-describedby-a" type="text" aria-describedby="input-example-a">
</div>
<!-- /input -->

Ejemplo: "Con describedby", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Con describedBy"
  },
  "id": "with-describedby-a",
  "name": "with-describedby-a",
  "describedBy": "input-example-a"
}) }}
Mostrar códigodel ejemplo: Con describedby

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Con describedBy"
  },
  "id": "with-describedby-a",
  "name": "with-describedby-a",
  "describedBy": "input-example-a"
}) }}

Pista con describedby

Ejemplo: "Pista con describedby", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="with-describedby-b">Pista con describedBy</label>
  <!-- /label -->
  <!-- hint -->
  <p id="with-describedby-b-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="with-describedby-b" name="with-describedby-b" type="text" aria-describedby="input-example-a with-describedby-b-hint">
</div>
<!-- /input -->

Ejemplo: "Pista con describedby", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Pista con describedBy"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "with-describedby-b",
  "name": "with-describedby-b",
  "describedBy": "input-example-a"
}) }}

Esto es una pista.

Mostrar códigodel ejemplo: Pista con describedby

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Pista con describedBy"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "with-describedby-b",
  "name": "with-describedby-b",
  "describedBy": "input-example-a"
}) }}

Error con describedby

Ejemplo: "Error con describedby", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="with-describedby-c">Error con describedBy</label>
  <!-- /label -->
  <!-- error-message -->
  <p id="with-describedby-c-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base " id="with-describedby-c" name="with-describedby-c" type="text" aria-describedby="input-example-a with-describedby-c-error" aria-errormessage="with-describedby-c-error" aria-invalid="true">
</div>
<!-- /input -->

Ejemplo: "Error con describedby", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Error con describedBy"
  },
  "id": "with-describedby-c",
  "name": "with-describedby-c",
  "describedBy": "input-example-a",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

Error:Error: esto es un mensaje de error

Mostrar códigodel ejemplo: Error con describedby

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Error con describedBy"
  },
  "id": "with-describedby-c",
  "name": "with-describedby-c",
  "describedBy": "input-example-a",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

Con error, pista y describedby

Ejemplo: "Con error, pista y describedby", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="input-with-both">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-both-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="input-with-both-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base " id="input-with-both" name="test-name" type="text" aria-describedby="input-example-a input-with-both-hint input-with-both-error" aria-errormessage="input-with-both-error" aria-invalid="true">
</div>
<!-- /input -->

Ejemplo: "Con error, pista y describedby", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-both",
  "name": "test-name",
  "describedBy": "input-example-a",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

Esto es una pista.

Error:Error: esto es un mensaje de error

Mostrar códigodel ejemplo: Con error, pista y describedby

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-both",
  "name": "test-name",
  "describedBy": "input-example-a",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

Inputmode

Este atributo proporciona información al navegador para que se pueda mostrar el teclado virtual apropiado, especialmente en dispositivos móviles. Este input tiene un inputmode='email'

Ejemplo: "Inputmode", de código HTML, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="con-inputmode">Inputmode</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="con-inputmode" name="inputmode" type="text" inputmode="email">
</div>
<!-- /input -->

Ejemplo: "Inputmode", de código Nunjucks, para maquetar el componente: "Input", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Inputmode"
  },
  "id": "con-inputmode",
  "name": "inputmode",
  "inputmode": "email"
}) }}
Mostrar códigodel ejemplo: Inputmode

Contenido

Nunjucks macro
{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Inputmode"
  },
  "id": "con-inputmode",
  "name": "inputmode",
  "inputmode": "email"
}) }}