Área de texto

Un componente para introducir texto arbitrario, valores numéricos y simbólicos en varias filas. Se usa con más frecuencia como descripción al crear entidades o introducir mensajes en formularios y cuadros de diálogo.

§Solicitud

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

La altura mínima es de una fila, pero se recomienda 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 requiere más de una línea de texto.
2. Cuando el texto debe ser una descripción extensa o un mensaje con muchos caracteres.
3. Cuando se agrega a un formulario con campos que deben rellenarse.

🚫 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 reducido de caracteres (menos de 5 palabras). Para ello, recomendamos utilizar 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 tienen un aspecto y se usan de forma diferente según el contexto.

Normal

• El tipo más utilizado.
• Una característica distintiva de este componente es su relleno interno y su radio de esquina. Estos parámetros vienen determinados por el tamaño del elemento y se definen mediante una variable específica para el radio de las esquinas (más información aquí), así como un trazo de 1 px.
• Se usa en formularios cuando se requiere espacio libre entre los componentes, como el relleno entre los elementos del formulario.

Borrar

• La característica definitoria de este componente es la ausencia de un borde, con elementos colocados dentro de los márgenes del campo de entrada.
• Se usa cuando el tipo Normal crea ruido visual.
• Cuando utilice este tipo, asegúrese de que el propósito de este componente esté claro para el usuario.

§Estructura

1. Valor

• Es un elemento obligatorio.
• Se puede usar como sugerencia (marcador de posición) y como texto introducido.
• El texto introducido sustituye a la sugerencia.

2. Botón Borrar

• Es un componente opcional.
• Se usa cuando es necesario borrar el contenido del campo.
• 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 de botón de tipo Flat-Secondary que hereda todas sus propiedades. Por ejemplo, el fondo de la cruz se rellena al pasar el ratón.
• 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 está incrustado en la parte inferior derecha.
• Se usa cuando se debe agregar texto adicional al exterior.
• El texto está alineado a la derecha.
• Por ejemplo, se puede usar como contador (contador de entrada de caracteres).

4. Icono de error

• Se muestra solo en el estado Error en línea.
• Funciona junto con Tooltip, ya que ofrece descripciones de errores al pasar el ratón sobre un icono para lograr un diseño más compacto del formulario.

5. Mensaje de error

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

§Estados

Tiene los siguientes estados: Sugerir, Predeterminado, Pasar el ratón, Activo, Desactivado, Error en línea y Error de esquema.

1. Sugerir. 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 una sugerencia, indicando al usuario qué tipo de información debe ingresarse en el campo.
2. Predeterminado. Estado inactivo cuando no hay interacción directa con el componente y ya se han introducido datos. En este estado, el valor de la sugerencia cambia en función de la entrada del usuario.
3. Flotar. Estado activo cuando el cursor pasa por encima del área del componente.
4. Activo. Estado activo, que se activa al hacer la transición desde el componente anterior o al hacer clic en él con el cursor. El estado se restablece al pasar a un componente diferente o al hacer clic con el cursor en un área vacía.
5. Discapacitado. Estado inactivo de un componente cuando no es posible interactuar con él.
6. Error de esquema. 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. Error en línea. Estado activo del componente cuando se produce un error de validación de campo, pero el error no se muestra. En su lugar, el error se representa mediante un icono especial que, al pasar el ratón sobre él, muestra una descripción emergente del error.

§Tallas

El componente está disponible en cuatro tamaños: S, M, L y XL.

La altura y el radio de las esquinas del campo, así como el relleno interior del campo y el tamaño del texto, varían en función del tamaño del componente.

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

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

§Guía del usuario

1. Trabajando con el campo

• La altura del campo puede variar. TextInput se puede usar para entradas de una sola línea.
• No se recomienda incluir una sugerencia en un campo, ya que el nombre del campo no estará visible al introducir un valor, a menos que el espacio sea limitado o que el usuario tenga claro el propósito del campo.
• Utilice el mismo tamaño para todos los componentes complementarios del formulario. Si seleccionó la talla M, todos los demás componentes deben tener el mismo tamaño.

2. Encabezado de campo externo

• 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 cuadro de diálogo sea S, en cuyo caso el título del componente se muestra en la parte superior del componente.

3. Sugerencia con información sobre herramientas

• Instrucciones para rellenar el campo al pasar el ratón sobre el icono con un signo de interrogación.
• Se usa cuando se deben aclarar el título y el significado.
• No debe incluir más de dos párrafos de texto.

4. Descripción adicional

• Se encuentra en la parte inferior o a la derecha del campo.
• Se usa en casos excepcionales cuando no está claro cómo rellenar un campo sin una descripción adicional o cuando se requieren explicaciones para los valores ingresados anteriormente.