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

Por defecto

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

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

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.

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.

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.

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.

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

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

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

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.

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.

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

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

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'

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

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.

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

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

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'

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