Entrada de texto

Un componente para introducir valores de texto arbitrario, numéricos y simbólicos en una sola línea. Se puede utilizar en formularios de página y cuadros de diálogo, así como en formularios de inicio de sesión, búsqueda y filtrado.

§Aplicación

A diferencia de TextArea, no cambia de altura durante la entrada y se utiliza para datos sencillos de formato libre con cualquier combinación de letras, números o símbolos.

Al introducir texto que excede el ancho del campo, puede desplazarse por el contenido hacia la izquierda y hacia la derecha.

✅ Cuándo usar

1. Cuando solo se requiere una línea de texto.
2. Cuando no es posible seleccionar una opción de una lista predeterminada.
3. Cuando hay suficiente espacio para la entrada de datos y no se necesitan interfaces de entrada más complejas.

🚫 Cuándo no usar

1. Cuando un parámetro solo se puede introducir a partir de una lista predefinida, ya que esto puede provocar un error. Para este propósito, considere usar otros componentes con una selección específica de opciones de valor, como Select, Radio Button, Radio y Checkbox.
2. Cuando se debe introducir un gran número de caracteres (más de 5 palabras). Para este propósito, recomendamos usar TextArea, un componente para la entrada de texto multilínea.

§Tipos

TextInput tiene dos tipos: Normal y Clear, que tienen el mismo conjunto de funciones pero se ven y se usan de manera diferente según el contexto.

Normal

• El tipo de uso más común.
• Una característica distintiva de este componente es su relleno interno y radio de esquina. Estos parámetros están determinados por el tamaño del elemento y un trazo de 1px.
• Se utiliza en formularios cuando se requiere espacio libre entre componentes, como relleno entre elementos del formulario.

Clear

• La característica definitoria de este componente es la ausencia de borde, con los elementos posicionados dentro de los márgenes del campo de entrada.
• Se utiliza cuando el tipo Normal crea ruido visual.
• Al usar este tipo, asegúrese de que el propósito de este componente sea claro para el usuario.

§Estructura

1. Icono izquierdo

• Es un componente opcional.
• El icono se puede utilizar para la identificación adicional del campo.
• Si se trata de una cadena de búsqueda, por ejemplo, se puede usar un icono de "lupa". O un icono de "llave", si se trata de un campo de entrada de contraseña.

2. Etiqueta en línea.

• Es un componente opcional.
• Amplifica el valor del nombre del campo.
• Reemplaza la etiqueta externa.
• Se utiliza como nombre de campo porque, al introducir un valor, la indicación desaparece, dejando el propósito del campo poco claro para el usuario.

3. Valor

• Es un elemento requerido.
• Espacio utilizado para el texto de la indicación y el texto introducido.
• Después de introducir un carácter, el texto introducido reemplaza la indicación.

4. Botón de borrado

• Es un componente opcional.
• Se utiliza cuando el contenido del campo necesita ser borrado.
• Se muestra cuando se ha introducido al menos un carácter en el campo.
• Se muestra incluso cuando el foco está fuera del campo.
• Es un componente Button de tipo Flat-secondary que hereda todas sus propiedades. Por ejemplo, el fondo de la cruz se rellena al pasar el ratón por encima.
• Al hacer clic en el botón de borrado, el foco se desplaza al campo y se borra el valor introducido.

5. Botones en línea

• Es un elemento opcional y está incrustado a la derecha.
• Se utiliza para indicar más claramente la relación entre el contenido y las acciones y se puede colocar dentro de un componente.
• El campo permite un máximo de dos componentes Button.
• El tamaño de los botones incrustados debe ser un tamaño menor que el tamaño del propio componente. Por ejemplo, si se utiliza el tamaño S, el botón debe ser XS; si se utiliza el tamaño M, el botón debe ser S; y así sucesivamente.
• Por ejemplo, se puede utilizar para confirmar acciones, enviar mensajes o añadir filtros adicionales a un campo.

6. Contenido adicional

• Es un elemento opcional y está incrustado a la derecha.
• Se utiliza cuando se requiere texto adicional en el interior.
• El texto está alineado a la derecha.
• Por ejemplo, se puede utilizar como contador (contador de caracteres introducidos), para contar el número de valores encontrados en una cadena de búsqueda, o para unidades de medida.

7. Icono de error

• Se muestra solo en el estado de Error en línea.
• Funciona junto con Tooltip, ofreciendo descripciones de error al pasar el ratón por encima del icono, para lograr un diseño compacto del formulario.

8. Descripción del error

• Se muestra solo en el estado de Error de contorno.
• Está incrustado en la parte inferior izquierda.

§Estados

Tiene los siguientes estados: Suggest, Default, Hover, Active, Disabled, Inline Error y Outline Error.

1. Suggest. Estado inactivo cuando no hay interacción directa con el componente y no se han introducido datos. En este estado, el valor puede servir como indicación, informando al usuario qué tipo de información debe introducirse en el campo.
2. Default. Estado inactivo cuando no hay interacción directa con el componente y ya se han introducido datos. En este estado, el valor de la indicación cambia en función de la entrada del usuario.
3. Hover. Estado activo cuando el cursor se sitúa sobre el área del componente.
4. Active. Estado activo, activado al pasar del componente anterior o al hacer clic con el cursor. El estado se restablece al pasar a otro componente o al hacer clic con el cursor en un área vacía.
5. Disabled. Estado inactivo de un componente cuando no es posible interactuar con él.
6. Outline error. Estado activo del componente cuando se produce un error durante la validación y se muestra en la parte inferior del campo junto con una explicación.
7. Inline error. Estado activo del componente cuando se produce un error de validación del campo, pero el error no se muestra. En su lugar, el error está representado por un icono especial que, al pasar el ratón por encima, muestra un Tooltip de error.

§Tamaños

El componente viene en cuatro tamaños: S, M, L y XL.

La altura y el radio de esquina del campo, así como el relleno interior del campo y el tamaño del texto, varían según el tamaño del componente.

El radio de esquina depende del tamaño y se establece mediante variables.

1. S (-g-border-radius-s: 5px;) – se utiliza cuando la entrada estándar es demasiado grande (por ejemplo, tablas, tarjetas pequeñas).
2. M (-g-border-radius-m: 6px;) – tamaño básico, se utiliza en la mayoría de los formularios y filtros.
3. L (-g-border-radius-l: 8px;) – se utiliza para búsquedas (por ejemplo, búsqueda de servicios).
4. XL (-g-border-radius-xl: 10px;) – se utiliza en el entorno de comunicación (por ejemplo, sitios web y páginas de destino).

§Guía de usuario

1. Trabajar con el campo

• El campo solo puede contener una línea. Para este propósito, recomendamos usar TextArea, un componente para la entrada de texto multilínea.
• No recomendamos incluir una indicación dentro de un campo, ya que el nombre del campo no será visible al introducir un valor, a menos que tenga espacio limitado o el propósito del campo sea claro para el usuario.
• El ancho del campo debe ser el mismo que el ancho del valor introducido. Informa al usuario sobre la entrada esperada.
• Utilice el mismo tamaño para todos los componentes complementarios del formulario. Si seleccionó el tamaño M, todos los demás componentes deben ser del mismo tamaño.

2. Encabezado externo del campo

Aquí tienes la traducción del archivo fuente de la guía de diseño al español, buscando que suene lo más natural posible para desarrolladores:

---

• Un nombre de campo corto, preferiblemente limitado a una línea.
• En formularios de escritorio, el componente debe colocarse en línea con el valor del campo. Si el contexto es móvil o el tamaño del Dialog es S, el título del componente se muestra encima del componente.

3. Pista con tooltip

• Instrucciones para rellenar el campo al pasar el ratón sobre el icono con un signo de interrogación.
• Se utiliza cuando el título necesita ser aclarado.
• No debe incluir más de dos párrafos de texto.

4. Descripción adicional

• Se puede encontrar debajo o a la derecha del campo.
• Se utiliza en casos raros cuando no está claro cómo rellenar un campo sin una descripción adicional o cuando se requieren explicaciones para valores introducidos previamente.

5. Las unidades de medida se pueden colocar de la siguiente manera:

• En la descripción textual del campo, si hay suficiente espacio en el formulario.
• Dentro del campo de entrada, si la descripción debe acortarse.
• A la derecha del campo, si se necesita espacio para otros elementos dentro del campo, como botones o un icono de limpieza (restablecimiento).