Entrada de texto

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

§Solicitud

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

Al introducir texto que supere 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. Al seleccionar una opción de una lista predeterminada no es posible.
3. Cuando hay suficiente espacio para la entrada de datos y no hay necesidad de interfaces de entrada más complejas.

🚫 Cuándo no usar

1. Cuando un parámetro solo se puede introducir desde una lista predefinida, ya que esto puede provocar un error. Para ello, considere la posibilidad de utilizar 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 ello, recomendamos utilizar 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 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 acolchado interno y su radio de esquina. Estos parámetros vienen determinados por el tamaño del elemento y 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. Icono de la izquierda

• Es un componente opcional.
• El icono se puede utilizar para identificar campos adicionales.
• 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.
• Sustituye a la etiqueta externa.
• Se usa como nombre de campo porque, cuando se introduce un valor, la sugerencia desaparece y el propósito del campo no queda claro para el usuario.

3. Valor

• Es un elemento obligatorio.
• Espacio utilizado para el texto de la sugerencia y el texto introducido.
• Tras introducir un carácter, el texto introducido sustituye a la sugerencia.

4. 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.

5. Botones en línea

• Es un elemento opcional y está incrustado a la derecha.
• Se usa para indicar con mayor claridad 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 de botón.
• El tamaño de los botones incrustados debe ser un tamaño más pequeño que el tamaño del componente. Por ejemplo, si se usa una talla S, el botón debe ser XS; si se usa una talla M, el botón debe ser S, y así sucesivamente.
• Por ejemplo, se puede usar para confirmar acciones, enviar mensajes o agregar filtros adicionales a un campo.

6. Contenido adicional

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

7. 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 compacto del formulario.

8. Descripción del 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

• El campo solo puede contener una línea. Para ello, recomendamos utilizar TextArea, un componente para la entrada de texto multilí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.
• El ancho del campo debe ser el mismo que el ancho del valor introducido. Informa al usuario de la entrada esperada.
• 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.
• En los formularios de escritorio, el componente debe estar alineado con el valor del campo. Si el contexto es móvil o el tamaño del cuadro de diálogo es S, 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 debe aclarar el título.
• 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.

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

• En la descripción del texto del campo, si hay suficiente espacio en el formulario.
• Dentro del campo de entrada, si la descripción debe abreviarse.
• A la derecha del campo, si se necesita espacio para otros elementos del campo, como botones o un icono de borrar (restablecer).