Cómo recrear la etiqueta flotante de Material Design

Cuando se trata de crear formularios en páginas web, la accesibilidad y el diseño deben ir de la mano.  Idealmente, cada campo de entrada deberías tener una etiqueta asociada y un marcador de posición, si es necesario. Sin embargo, desde una perspectiva de diseño, esto puede hacer que un formulario parezca bastante pesado en texto.

Las etiquetas como marcadores de posición, a veces conocidas como etiquetas flotantes, son una opción de diseño popular para crear formas minimalistas y accesibles. Este método también se usa comúnmente en sistemas de diseño populares como Bootstrap y Material Design (que se muestran a continuación):

En este tutorial, recrearemos la etiqueta flotante utilizada en los campos de texto de Material Design utilizando CSS y JavaScript vanilla.

Etiqueta flotante de diseño de materiales

Así es como se ve el resultado final:

Comienca con el formato HTML Markup

Primero, creamos el marcado para nuestro formulario de Material Design que incluye una etiqueta y un campo de entrada de texto.

  <div class="input-container">
    <input type="text" id="name" required/>
    <label for="name">First Name</label>
  </div>
</form>

Es importante asociar etiquetas a tus campos de entrada relacionados mediante el atributo for y el id de la entrada. Los lectores de pantalla lo utilizan para comunicar los detalles del formulario.

Usando el panel de accesibilidad de DevTools, podemos ver cómo las etiquetas y las entradas están vinculadas en el marcado del formulario anterior:

Formulario de diseño de materiales CSS

El estilo más importante para una etiqueta flotante es hacer que la etiqueta esté absolutamente posicionada dentro de un elemento padre relativo. Queremos poder mover nuestra etiqueta alrededor del contenedor de entrada sin interrumpir el flujo de elementos.

.input-container {
  position: relative;
  height: 56px;
}

label {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Etiqueta flotante en foco

También queremos hacer flotar la etiqueta cada vez que el usuario hace clic en la entrada. Podemos hacer esto usando el selector: focus y + (más). Cuando la entrada está enfocada, cambiamos la posición, el tamaño y el color de la etiqueta.

input:focus + label {
  transform: translateY(-100%) scale(0.75);
  color: #6200ee;
}

Nota: Esto funciona porque la etiqueta es el siguiente elemento inmediatamente después del campo de entrada. El selector más apunta al siguiente elemento inmediato, por lo que no funcionará si la etiqueta se coloca antes de la entrada o si se coloca otro elemento entre los dos.

Etiqueta flotante con entrada de usuario

Otra característica de la etiqueta flotante es que permanece flotante si la entrada tiene un valor, incluso si el usuario ya no se centra en la entrada.

Podemos lograr esto usando CSS: selector válido y el atributo requerido en el marcado HTML

Usamos el selector válido para las entradas requeridas para detectar si la entrada tiene un valor.

input:focus + label,
input:valid + label {
  transform: translateY(-100%) scale(0.75);
}

Con esto, la etiqueta permanece flotante cuando la entrada está enfocada o tiene un valor.

Desafortunadamente, existen algunos inconvenientes al usar el selector válido. Por ejemplo, si se utiliza el selector válido en una entrada de correo electrónico, la entrada se considera no válida si el valor no está en formato de correo electrónico.

Podemos resolver esto con un poco de JavaScript.

Agregar oyente de eventos de JavaScript

Usamos JavaScript para detectar si la entrada tiene un valor cada vez que el usuario navega fuera de ella.

const inputs = document.querySelectorAll("input");

inputs.forEach((input) => {
  input.addEventListener("blur", (event) => {
    if (event.target.value) {
      input.classList.add("is-valid");
    } else {
      input.classList.remove("is-valid");
    }
  });
});

Siempre que la entrada pierde el foco, verificamos si contiene un valor. Si es así, agregamos la clase es válida, si no, eliminamos la clase válida. Podemos actualizar nuestro estilo CSS para hacer flotar la etiqueta con la clase es válida.

input:focus + label,
input.is-valid + label {
  transform: translateY(-100%) scale(0.75);
}

¡Con esto hemos implementado el diseño de etiqueta flotante!

Aquí está el CSS completo para recrear el aspecto del formulario de Material Design.

.form-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
}

form {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 95%;
  max-width: 300px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 8%), 0 0 15px 0 rgb(0 0 0 / 2%), 0 0 20px 4px rgb(0 0 0 / 6%);
}

.input-container {
  background-color: #f5f5f5;
  position: relative;
  border-radius: 4px 4px 0 0;
  height: 56px;
  transition: background-color 500ms;
}

.input-container:hover {
  background-color: #ececec;
}

.input-container:focus-within {
  background-color: #dcdcdc;
}

label {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
  color: rgba(0, 0, 0, 0.5);
  transform-origin: left top;
  user-select: none;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1), top 500ms;
}

input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: transparent;
  caret-color: #6200ee;
  border: 1px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.42);
  color: rgba(0, 0, 0, 0.87);
  transition: border 500ms;
  padding: 20px 16px 6px;
  font-size: 1rem;
}

input:focus {
  outline: none;
  border-bottom-width: 2px;
  border-bottom-color: #6200ee;
}

input:focus + label {
  color: #6200ee;
}

input:focus + label,
input.is-valid + label {
  transform: translateY(-100%) scale(0.75);
}

¡Tus etiquetas flotantes de material design están completas!

Como ocurre con la mayoría de los patrones de diseño, las etiquetas flotantes han provocado una buena cantidad de debates. Siempre que haz que tus formularios sean accesibles y fáciles de usar, puedes utilizar cualquier patrón de diseño que desees.  Con suerte, este tutorial te servirá como una guía útil si decides utilizar etiquetas flotantes.

Más tutoriales de diseño de formularios

Obtén más información sobre patrones de diseño de formularios, etiquetas flotantes, formularios de Material Design y accesibilidad de formularios aquí en Tuts +:

• 
  CSS
  Mejores estilos de enfoque con CSS Pseudo-Class: focus-visible
  Adi Purdila
• 
  Validación
  Validación de formularios HTML5 con el atributo "patrón"
  Thoriq Firdaus
• 
  Diseño de formularios
  Consejo rápido: agrega un formulario Formspree a tus sitios estáticos
  David Darnes
• 
  Formularios
  Cómo personalizar el formulario de contacto 7 para WordPress: etiquetas flotantes
  George Martsoukos
• 
  Accesibilidad
  Cómo hacer casillas de verificación y botones de opción accesibles personalizados
  Sami Keijonen
• 
  Diseño de materiales Lite
  Aprendizaje Diseño de materiales Lite: campos de texto
  Thoriq Firdaus