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: 5.0.2

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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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

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.

Ejemplo: "Con mensaje de error", de código HTML, para maquetar el componente: "Input", versión: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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>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" 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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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": "Esto es un mensaje de error"
  }
}) }}

Esto es una pista.

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": "Esto es un mensaje de error"
  }
}) }}

Con mensaje de error con id personalizado

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.

Ejemplo: "Con mensaje de error con id personalizado", de código HTML, para maquetar el componente: "Input", versión: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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>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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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": "Esto es un mensaje de error"
  }
}) }}

Esto es una pista.

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": "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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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 clases de form-group opcionales

Ejemplo: "Con clases de form-group opcionales", de código HTML, para maquetar el componente: "Input", versión: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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>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-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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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": "Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}

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": "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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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

El atributo placeholder proporciona un texto de ejemplo que se muestra en el campo de entrada cuando está vacío. Intenta usar la pista con el atributo hint en su lugar ya que es más accesible. El placeholder debe ser un apoyo a la pista, no un sustituto.

Ejemplo: "Placeholder", de código HTML, para maquetar el componente: "Input", versión: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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 -->
  <!-- hint -->
  <p id="con-placeholder-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="con-placeholder" name="placeholder" type="text" aria-describedby="con-placeholder-hint" placeholder="Esto es un placeholder">
</div>
<!-- /input -->

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

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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": "con-placeholder",
  "name": "placeholder",
  "placeholder": "Esto es un placeholder"
}) }}

Esto es una pista.

Mostrar códigodel ejemplo: Placeholder

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": "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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
}) }}

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: 5.0.2, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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: 5.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
}) }}