Micro-interaction

Floating Label

También llamado Float label, Animated placeholder

La etiqueta del placeholder sube y se reduce por encima del campo cuando este recibe el foco o tiene contenido.

Formularios, campos de inicio de sesión

  • focus float
  • not(:placeholder-shown)

Ver el código de la demo

Prompt

Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.

Añade un "Floating Label" (también llamado float label o animated placeholder) en [dónde].
Cuando el campo reciba el foco o tenga un valor, la etiqueta que está dentro debe deslizarse hacia arriba y reducirse hasta el borde superior del campo, de forma suave y rápida, y volver a bajar solo cuando el campo esté vacío y sin foco.
Mantenla como una etiqueta real vinculada al input y asegúrate de que la altura del campo no cambie para que el formulario nunca se desplace.

Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.