Text Field

Los Text field 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

Composición

  • Container
    Los contenedores mejoran la visibilidad de los campos de texto al crear un contraste entre el campo de texto y el contenido que lo rodea.
  • Leading icon (optional)
    Pueden describir el tipo de entrada que requiere un campo de texto.
  • Label text
    El texto de la etiqueta se utiliza para informar a los usuarios de la información requerida en el campo de texto. Cada campo debe tener una etiqueta. El texto de la etiqueta debe estar alineado con el texto de entrada y debe ser siempre visible. Puede colocarse en el medio de un campo de texto o cerca de la parte superior del contenedor.
  • Input text
    Es el texto que el usuario ha introducido en el campo de texto. Se compone del propio texto y de un cursor, que indica la posición actual del texto en el campo.
  • Trailing icon (optional)
    Pueden describir métodos de entrada válidos (como un icono de micrófono), proporcionar posibilidades para acceder a funciones adicionales (como borrar el contenido de un campo) y pueden expresar un error.
  • Activation indicator
    Línea que refleja el estado del input.
  • Helper text (optional)
    Refleja una ayuda adicional sobre el campo de entrada, como por ejemplo, cómo se usará. Debería ocupar una sola línea, siendo visible de manera persistente o únicamente con el estado focus.

Estados

  • Empty
    Su estado por defecto
  • Focus
    Comunica que el usuario ha seleccionado este elemento.
  • Active
    Estado en que se encuentra mientras sucede la interacción del usuario con el componente.
  • Filled
    Estado del componente una vez el usuario ha realizado la interacción.
  • Error
    Comunica al usuario que ha sucedido un error en la validación de los datos incluidos.
  • Disabled
    Estado en el que no puede ser modificado por los usuarios.

Usos

  • 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.
  • Los estados deben diferenciarse claramente entre si.
  • La información solicitada y la resolución de cualquier error deben entenderse fácilmente.