Input

Mostrar parámetros

Parámetros del componente

              params:
- name: id
  type: string
  required: true
  description: The id of the input.
- name: name
  type: string
  required: true
  description: The name of the input, which is submitted with the form data.
- name: type
  type: string
  required: false
  description: Type of input control to render. Defaults to "text".
- name: inputmode
  type: string
  require: false
  description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
- name: value
  type: string
  required: false
  description: Optional initial value of the input.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: label
  type: object
  required: true
  description: Options for the label component.
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: errorId
  type: string
  required: false
  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.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: classes
  type: string
  required: false
  description: Classes to add to the input.
- name: autocomplete
  type: string
  required: false
  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
- name: pattern
  type: string
  required: false
  description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
- name: placeholder
  type: string
  required: false
  description: Placeholder text
- name: disabled
  type: boolean
  required: false
  description: If true, input will be disabled.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the anchor tag.
              
            

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

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

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.

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 label como encabezado

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

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

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

Mostrar códigodel ejemplo: Placeholder

Contenido

Nunjucks macro

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

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "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"
}) }}

Error con describedby

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

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"

Mostrar códigodel ejemplo: Inputmode

Contenido

Nunjucks macro

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

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