Input Text

Descarga la librería LDDescarga la librería SD

Los inputs son la forma más básica de crear una entrada dentro de un formulario. 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.

Los inputs suelen estar compuestos de la siguiente forma:

• Label
• Input text
• Placeholder
• Icono (opcional)
• Instrucciones o Texto de ayuda (opcional)

Encontraremos distintos tipos de usos para estos campos:

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. También pueden ser parte de un modal, búsqueda o tarjeta. Los input text más comunes son:

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

Input password

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

Recomendaciones de uso

• Los campos de texto deben destacar e indicar que los usuarios pueden ingresar informació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.
• Utilice inputs en formularios para ayudar a las personas a ingresar, seleccionar y buscar texto.
• Los mensajes de error o estilo solo deben mostrarse después de que un usuario haya interactuado con un campo en particular.

Estados

1. Default: es el input en su estado normal o reposo.

   
   

2. Active: es el estado en el que se encuentra el input y marca dónde se encuentra interactúando el usuario

   
   

3. Filled: es cuando el campo está relleno con la información solicitada.

   
   

4. Disabled: es su estado desactivado y no se puede seleccionar ni deseleccionar.

   
   

5. Error: el color rojo marca que ha ocurrido un error.

   
   

6. Warning: el color amarillo marca un aviso.

   
   

7. Success: el color verde marca que todo está correcto.