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.
Campo de entrada con borde gris de 1px y esquinas redondeadas, fondo blanco. Label en texto negro de peso regular posicionado arriba del input. Altura del campo aproximadamente 35-40px, ancho de 100px.
{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
"label": {
"text": "Esto es un label"
},
"id": "input-example-a",
"name": "test-name"
}) }}Campo de entrada con borde gris claro de 1px y esquinas redondeadas, fondo blanco. Label en texto negro de peso regular posicionado arriba del input. Altura del campo aproximadamente 35-40px, ancho de 100px, apariencia visual sin interacción activa.
{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
"label": {
"text": "Esto es un label"
},
"id": "input-example-b",
"name": "test-name",
"disabled": true
}) }}Campo de entrada con borde gris de 1px y esquinas redondeadas, fondo blanco. Label en texto negro de peso regular arriba, seguido de texto secundario en gris oscuro debajo del label. Campo de entrada con altura aproximadamente 35-40px, ancho de 100px, posicionado debajo del texto secundario.
Esto es una pista.
{% 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"
}) }}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.
Campo de entrada de texto con borde rojo de 2px, fondo blanco, y esquinas ligeramente redondeadas. Incluye label negro en peso normal, texto de pista rojo debajo del label, y mensaje de error rojo debajo del campo. Ancho del input es estrecho (aproximadamente 100px).
Esto es una pista.
Error:Esto es un mensaje de error
{% 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"
}
}) }}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.
Campo de entrada de texto con borde rojo de 2px, fondo blanco, y esquinas ligeramente redondeadas. Incluye label negro en peso normal arriba, texto de pista rojo debajo del label, y mensaje de error rojo debajo del campo. Ancho del input es estrecho (aproximadamente 100px).
Esto es una pista.
Error:Esto es un mensaje de error
{% 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"
}
}) }}Este ejemplo usa todo el ancho disponible. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.
Campo de entrada de texto con borde gris de 1px, fondo blanco, y esquinas ligeramente redondeadas ocupando el ancho completo del contenedor. Incluye label negro en peso normal arriba y texto de pista gris oscuro debajo del label. El input se extiende horizontalmente de borde a borde del área disponible.
Esto es una pista.
{% 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"
}) }}Este ejemplo usa la mitad del ancho disponible por su contenedor. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.
Input de texto con borde gris de 1px, fondo blanco, ocupando aproximadamente la mitad del ancho del contenedor. Label en texto negro normal arriba del campo, seguido de texto auxiliar gris claro debajo del label. Campo de entrada rectangular con altura estándar y esquinas ligeramente redondeadas.
Esto es una pista.
{% 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"
}) }}Este ejemplo usa una anchura predefinida de DESY. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles
Input de texto con borde gris de 1px, fondo blanco, ocupando un ancho fijo reducido (aproximadamente 150-200px). Label en texto negro normal posicionado arriba del campo, seguido de texto auxiliar gris claro debajo del label. Campo de entrada rectangular compacto con altura estándar y esquinas ligeramente redondeadas.
Esto es una pista.
{% 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"
}) }}Input de texto con borde gris de 1px, fondo blanco, dentro de un contenedor con fondo celeste/azul claro que ocupa todo el ancho disponible. Label en texto negro normal posicionado arriba del campo dentro del área celeste. Campo de entrada rectangular con altura estándar, esquinas ligeramente redondeadas, rodeado de padding generoso del contenedor de fondo celeste.
{% 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"
}
}) }}Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco. Label en texto negro regular posicionado arriba del campo. Dimensiones aproximadas de 100px de ancho por 30px de alto para el input.
{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
"label": {
"text": "Código postal"
},
"id": "input-with-autocomplete-attribute",
"name": "postcode",
"autocomplete": "postal-code"
}) }}Usa el atributo pattern para elegir un patrón de entrada de datos nativo del navegador.
Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco. Label en texto negro regular posicionado arriba del campo. Dimensiones aproximadas de 100px de ancho por 30px de alto para el input.
{% 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]*"
}) }}El formulario debe comenzar con un párrafo que ponga: * Todos los campos marcados con asterisco son obligatorios.
Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco. Label en texto negro regular con asterisco rojo posicionado arriba del campo. Dimensiones aproximadas de 100px de ancho por 30px de alto para el input.
{% 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": ""
}
}) }}Campo de entrada de texto con label "Input peque" en texto negro de peso normal. Borde gris delgado de 1px, fondo blanco, tamaño reducido del input. El campo presenta esquinas ligeramente redondeadas.
{% 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"
}) }}Label en linea + Input flexible y mensaje de error
Campo de entrada de texto con label en texto negro de peso normal. Borde rojo grueso de 2-3px, fondo blanco del input. Mensaje de error en texto rojo debajo del campo.
Error:Esto es un mensaje de error
{% 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"
}) }}Si no se espacifica, el tipo por defecto es text. Este Input tiene un type='number'
Campo de entrada de texto con label en texto negro de peso normal. Borde gris delgado de 1px, fondo blanco, tamaño estándar del input. El campo presenta esquinas ligeramente redondeadas.
{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
"label": {
"text": "Input de tipo número"
},
"id": "custom-type",
"name": "custom-type",
"type": "number"
}) }}Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco. Título en texto negro estándar arriba, seguido de label en negro. Input contiene texto en negro estándar, tamaño mediano.
{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
"label": {
"text": "Esto es un label"
},
"id": "value",
"name": "valor",
"value": "Esto es un valor"
}) }}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.
Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco. Título en texto negro estándar arriba, seguido de dos líneas de texto en negro. Input muestra texto placeholder en gris claro, tamaño mediano.
Esto es una pista.
{% 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"
}) }}Campo de entrada de texto con borde gris de 1px y esquinas redondeadas, fondo blanco vacío. Título en texto negro estándar arriba, seguido de label en negro. Input de tamaño mediano sin contenido visible ni placeholder.
{% 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"
}) }}Campo de entrada de texto rectangular con borde gris de 1px y fondo blanco. Incluye un label negro en peso normal arriba y texto descriptivo gris claro debajo del label indicando "Este es una pista". Ancho aproximado de 100px, altura estándar de input.
Esto es una pista.
{% 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"
}) }}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'
Campo de entrada de texto rectangular con borde gris de 1px y fondo blanco. Presenta un label negro en peso normal posicionado arriba del campo. Ancho aproximado de 100px, altura estándar de input, sin elementos adicionales de ayuda o descripción.
{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
"label": {
"text": "Inputmode"
},
"id": "con-inputmode",
"name": "inputmode",
"inputmode": "email"
}) }}