Área de texto

Un componente para introducir valores de texto arbitrario, numéricos y simbólicos en varias filas. Se utiliza comúnmente para descripciones al crear entidades o al introducir mensajes en formularios y cuadros de diálogo.

§Aplicación

A diferencia de TextInput, tiene la altura de la suma de las filas y se utiliza para introducir datos de forma libre con cualquier combinación de letras, números o símbolos.

La altura mínima es de una fila, pero recomendamos usar un componente con dos o más filas.

Si no se especifica el número de filas, la altura se calcula automáticamente en función de la cantidad de contenido.

✅ Cuándo usar

1. Cuando se requieren más de una línea de texto.
2. Cuando el texto debe ser una descripción extensa o un mensaje que contenga muchos caracteres.
3. Cuando se añade a un formulario con campos que deben ser completados.

🚫 Cuándo no usar

1. Cuando se requiere un filtro, un campo de formulario de autorización o una cadena de búsqueda.
2. Cuando se requiere un número pequeño de caracteres (menos de 5 palabras). Para este propósito, recomendamos usar TextInput, un componente para la entrada de texto de una sola línea.

§Tipos

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

Normal

• El tipo más comúnmente utilizado.
• Una característica distintiva de este componente es su relleno interno y radio de esquina. Estos parámetros se determinan por el tamaño del elemento y se definen por una variable específica para el radio de esquina (más información aquí), así como 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 un 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. Valor

• Es un elemento requerido.
• Puede usarse como pista (placeholder) y como texto introducido.
• El texto introducido reemplaza la pista.

2. Botón de borrar

• 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 borrar, el foco se desplaza al campo y se borra el valor introducido. 3. Contenido adicional

• Es un elemento opcional y se incrusta en la parte inferior derecha.
• Se utiliza cuando se debe añadir texto adicional en el exterior.
• El texto está alineado a la derecha.
• Por ejemplo, puede usarse como contador (contador de caracteres introducidos).

4. Icono de error

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

5. Mensaje de error

• Se muestra solo en el estado de Error de Contorno (Outline Error).
• Se incrusta 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 pista, indicando 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 pista 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 ocurre 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 ocurre 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 puede variar en altura. TextInput se puede usar para entradas de una sola línea.
• No recomendamos incluir una pista 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.
• 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

• Un nombre de campo corto, preferiblemente limitado a una línea.
• El componente debe colocarse en línea con el valor del campo, a menos que el contexto sea móvil o el tamaño del Dialog sea S, en cuyo caso el título del componente se muestra encima del componente.

3. Pista con tooltip

• Instrucciones para completar el campo al pasar el ratón por encima del icono con un signo de interrogación.
• Se utiliza cuando el título y el significado deben aclararse.
• No debe incluir más de dos párrafos de texto.

4. Descripción adicional

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