Input Text

Los input text permiten a los usuarios ingresar e interactuar con datos. Los inputs son la forma más básica de crear una entrada dentro de un formulario, pero también pueden formar parte de una modal, un login, etc. Permiten a los usuarios ingresar cualquier combinación de letras, números o símbolos de su elección (a menos que esté restringido). Los campos de texto pueden abarcar una o varias líneas.

Recomendaciones de uso

¿Qué hacer?

• Usar cuando un usuario debe ingresar un dato como su nombre, correo, dirección...
• Es aconsejable añadir un label para ayudar a los usuarios a comprender qué información debe ingresar en el campo de texto.
• Los placeholder proporcionan al usuario sugerencias o ejemplos.
• Los mensajes de error o estilo solo deben mostrarse después de que un usuario haya interactuado con un campo en particular.
• Los campos obligatorios se deben indicar con un asterisco.

¿Qué no hacer?

• Recopilar varias líneas de texto en un input, en su lugar utiliza un text area.
• Realizar una búsqueda, para ello existe el componente search.

Input Text Responsive

Cuando el ancho del navegador cambia, los input deben apilarse a medida que la pantalla se hace más pequeña. Por ejemplo, en el breakpoint large (1680 px), cuatro input text llenan una fila, en un punto medio (1216 px) los imput se apilaran en dos columnas, y en el breakpoint small (360 px), los campos aparecerán en una columna.

Tipos

En Thesaurus DS encontramos diferentes tipos de input text para crear formularios.

Text input

Las entradas de texto son campos de entrada que normalmente se usan en formularios que permiten al usuario ingresar datos de texto en un formato estructurado. Las entradas de texto deben ir acompañadas de etiquetas.

Los input text más comunes son:

• Nombres de usuario
• Descripciones
• URL
• Correos electrónicos
• Direcciones
• Búsquedas de texto sin formato.

Password

El componente password enmascara el input para evitar que otros usuarios lean el texto de la pantalla.

Los estados son los mismos que los de el resto de input.

Autocomplete

Este componente ayuda al usuario a completar un campo mediante varias opciones de texto predictivo que aparece al desplegarse un panel.

Estados

1. Stanby: es el input en su estado normal o reposo.
2. Hover: al pasar por encima del input esté se activará mostrandonos un cursor.
3. Focus: es el estado que nos marca con qué elemento estamos interactuando.
4. Active:: nos marca cuando estamos completando el input.
5. Filled: es es estado del input cuando está completado por el usuario.
6. Required: nos marca cuando un campo es obligatorio.
7. Disabled: es el estado desactivado del input.
8. Error: nos marca cuando hemos introducido mal algun dato en el campo. Nos informa del error y contiene un texto de ayuda.

Si se van a colocar sobre un fondo oscuro, se utilizarán en el color inverso; si van sobre un fondo claro utilizarán en el color default del theme.

• Modo Default

• Input text

• Autocomplete

• Modo Inverse

• Input text

• Autocomplete

Anatomía

Los inputs suelen estar compuestos de la siguiente forma:

1. Label
2. Placeholder
3. Instrucciones o Texto de ayuda (opcional)

El autocomplete estaría compuesto por:

1. Label
2. Placeholder
3. Panel desplegable
4. Instrucciones o Texto de ayuda (opcional)

Estilos

Color

• Modo Default

Nombre	Propiedad	Color token
Input	Background	$transparent
Input:label	text color	$text-01
Input: placehoder	text color	$text-04
Input:border	Stroke	$UI-06
Input:panel-autocomplete	background	$UI-02
Input:panel-autocomplete-item	text color	$text-01
Input:panel-autocomplete	shadow	$small

• Interactive Color

Nombre	Propiedad	Color token
Focus	Stroke	$focus-01
Active:placeholder	text color	$text-01
Error	color	$support-01
Disabled	color	$disabled-04

• Modo Inverse

Nombre	Propiedad	Color token
Input	Background	$transparent
Input:label	text color	$inverse-01
Input: placehoder	text color	$inverse-01
Input:border	Stroke	$inverse-01
Input:panel-autocomplete	background	$UI-02
Input:panel-autocomplete-item	text color	$text-01
Input:panel-autocomplete	shadow	$small

• Interactive Color

Nombre	Propiedad	Color token
Focus	Stroke	$focus-01
Error	color	$support-01
Disabled	color	$disabled-03

Tipografía

Nombre	Tamaño fuente	Font weight	Estilo
Input:label L	13/0.813	Regular/400	$tiny-M
Input: label M	13/0.813	Regular/400	$tiny-M
Input: label S	13/0.813	Regular/400	$tiny-M
Input: placeholder L	15/0.938	Regular/400	$body-inline
Input: placeholder M	13/0.813	Regular/400	$body-inline
Input: placeholder S	13/0.813	Regular/400	$body-inline
Input: help-text L	13/0.813	Regular/400	$tiny-M
Input: help-text M	13/0.813	Regular/400	$tiny-M
Input: help-text S	13/0.813	Regular/400	$tiny-M
autocomplete: item L	15/0.938	Regular/400	$body-inline
autocomplete: item M	13/0.813	Regular/400	$body-inline
autocomplete: item S	13/0.813	Regular/400	$body-inline

Estructura

• Input text

• Autocomplete