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.

Demo en vivo

Mensaje de error

<fieldset style="width: 300px; max-width: 100%;">
  <div class="rds-mb-l03">
    <label for="input" class="rds-input__label">Empty</label>
    <input id="input" class="rds-input" type="text" placeholder="Placeholder text">
  </div>
  <div class="rds-mb-l03">
    <label for="input1" class="rds-input__label">Filled</label>
    <input id="input1" class="rds-input" type="text" value="Lorem ipsum">
  </div>
  <div class="rds-mb-l03">
    <label for="input2" class="rds-input__label">Error</label>
    <input id="input2" class="rds-input rds-input--error" type="text" placeholder="Placeholder text">
    <p class="rds-input__error">Mensaje de error</p>
  </div>
  <div class="rds-mb-l03">
    <label for="input3" class="rds-input__label rds-input__label--disabled">Disabled</label>
    <input id="input3" class="rds-input" type="text" value="Lorem ipsum" disabled>
  </div>
</fieldset>

Mensaje de error

<fieldset style="width: 300px; max-width: 100%;">
  <div class="rds-mb-l03">
    <label for="inputi" class="rds-input__label rds-input__label--inverse">Empty</label>
    <input id="inputi" class="rds-input rds-input--inverse" type="text" placeholder="Placeholder text">
  </div>
  <div class="rds-mb-l03">
    <label for="input1i" class="rds-input__label rds-input__label--inverse">Filled</label>
    <input id="input1i" class="rds-input rds-input--inverse" type="text" value="Lorem ipsum">
  </div>
  <div class="rds-mb-l03">
    <label for="input2i" class="rds-input__label rds-input__label--inverse">Error</label>
    <input id="input2i" class="rds-input rds-input--error rds-input--inverse" type="text" placeholder="Placeholder text">
    <p class="rds-input__error">Mensaje de error</p>
  </div>
  <div class="rds-mb-l03">
    <label for="input3i" class="rds-input__label rds-input__label--inverse rds-input__label--disabled">Disabled</label>
    <input id="input3i" class="rds-input rds-input--inverse" type="text" value="Lorem ipsum" disabled>
  </div>
</fieldset>

Mensaje de error

<fieldset style="width: 300px; max-width: 100%;">
  <div class="rds-mb-l03">
    <label for="inputicon" class="rds-input__label">Empty</label>
    <div class="rds-input__cnt">
      <input id="inputicon" class="rds-input" type="text" placeholder="Placeholder text">
      <span class="rds-input__icon rds-icon-Replace_this_icon" aria-hidden="true"></span>
    </div>
  </div>
  <div class="rds-mb-l03">
    <label for="inputicon1" class="rds-input__label">Filled</label>
    <div class="rds-input__cnt">
      <input id="inputicon1" class="rds-input" type="text" value="Lorem ipsum">
      <span class="rds-input__icon rds-icon-Replace_this_icon" aria-hidden="true"></span>
    </div>
  </div>
  <div class="rds-mb-l03">
    <label for="inputicon2" class="rds-input__label">Error</label>
    <div class="rds-input__cnt">
      <input id="inputicon2" class="rds-input rds-input--error" type="text" placeholder="Placeholder text">
      <span class="rds-input__icon rds-icon-Replace_this_icon" aria-hidden="true"></span>
    </div>
    <p class="rds-input__error">Mensaje de error</p>
  </div>
  <div class="rds-mb-l03">
    <label for="inputicon3" class="rds-input__label rds-input__label--disabled">Disabled</label>
    <div class="rds-input__cnt rds-input__cnt--disabled">
      <input id="inputicon3" class="rds-input" type="text" value="Lorem ipsum" disabled>
      <span class="rds-input__icon rds-icon-Replace_this_icon" aria-hidden="true"></span>
    </div>
  </div>
  <div class="rds-mb-l03">
    <label for="inputicon4" class="rds-input__label">Empty - With clickable icon</label>
    <div class="rds-input__cnt">
      <input id="inputicon4" class="rds-input" type="text" placeholder="Placeholder text">
      <button type="button" class="rds-input__icon rds-input__icon--control rds-icon-Replace_this_icon" aria-label="Explicación sobre la acción que realiza el botón"></button>
    </div>
  </div>
</fieldset>

Mensaje de error

<fieldset style="width: 300px; max-width: 100%;">
  <div class="rds-mb-l03">
    <label for="inputiconi" class="rds-input__label rds-input__label--inverse">Empty</label>
    <div class="rds-input__cnt">
      <input id="inputiconi" class="rds-input rds-input--inverse" type="text" placeholder="Placeholder text">
      <span class="rds-input__icon rds-icon-Replace_this_icon" aria-hidden="true"></span>
    </div>
  </div>
  <div class="rds-mb-l03">
    <label for="inputicon1i" class="rds-input__label rds-input__label--inverse">Filled</label>
    <div class="rds-input__cnt">
      <input id="inputicon1i" class="rds-input rds-input--inverse" type="text" value="Lorem ipsum">
      <span class="rds-input__icon rds-icon-Replace_this_icon" aria-hidden="true"></span>
    </div>
  </div>
  <div class="rds-mb-l03">
    <label for="inputicon2i" class="rds-input__label rds-input__label--inverse">Error</label>
    <div class="rds-input__cnt">
      <input id="inputicon2i" class="rds-input rds-input--error rds-input--inverse" type="text" placeholder="Placeholder text">
      <span class="rds-input__icon rds-icon-Replace_this_icon" aria-hidden="true"></span>
    </div>
    <p class="rds-input__error">Mensaje de error</p>
  </div>
  <div class="rds-mb-l03">
    <label for="inputicon3i" class="rds-input__label rds-input__label--inverse rds-input__label--disabled">Disabled</label>
    <div class="rds-input__cnt rds-input__cnt--disabled">
      <input id="inputicon3i" class="rds-input rds-input--inverse" type="text" value="Lorem ipsum" disabled>
      <span class="rds-input__icon rds-icon-Replace_this_icon" aria-hidden="true"></span>
    </div>
  </div>
  <div class="rds-mb-l03">
    <label for="inputicon4i" class="rds-input__label rds-input__label--inverse">Empty - With clickable icon</label>
    <div class="rds-input__cnt">
      <input id="inputicon4i" class="rds-input rds-input--inverse" type="text" placeholder="Placeholder text">
      <button type="button" class="rds-input__icon rds-input__icon--control rds-icon-Replace_this_icon" aria-label="Explicación sobre la acción que realiza el botón"></button>
    </div>
  </div>
</fieldset>

Estados

  • Empty
    Su estado por defecto
  • Hover
    Indica que es un elemento interactivo cuando el usuario hacer hover con su cursor.
  • 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.