Back

Creating a Modern Floating Label Input Field

Learn how to build an advanced input field with floating labels for a seamless user experience.

HTML

To start, we'll create a simple HTML structure that includes a container with an input field and a label. The trick here is to make the label float above the input when it's focused or filled.

  <div class="floating-container">
    <input type="text" class="floating-input" placeholder=" " id="name" />
    <label for="name" class="floating-label">Name</label>
  </div>

CSS

Our CSS styles for this component will utilize the positioning capabilities to create the floating effect. Notably, the .floating-label class provides the transformation effect that shifts the label above the input.

  .floating-container {
    position: relative;
    margin-bottom: 20px;
    border-bottom: 2px solid #cccccc;
  }
  .floating-input {
    border: none;
    border-bottom: 1px solid transparent;
    width: 100%;
    outline: none;
    font-size: 16px;
    padding: 10px 0;
  }
  .floating-label {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 16px;
    color: #aaa;
    pointer-events: none;
    transition: all 0.2s ease;
  }
  .floating-label.floating {
    top: -20px;
    font-size: 12px;
    color: #2196F3;
  }

JavaScript

Adding a pinch of JavaScript enables us to handle the label movement based on user interactions with the input field. The script listens for 'focus' and 'blur' events, ensuring the label only moves if the input is being focused or has a value.

  document.querySelectorAll('.floating-input').forEach(input => {
    input.addEventListener('focus', (e) => {
      e.target.parentNode.querySelector('.floating-label').classList.add('floating');
    });
    input.addEventListener('blur', (e) => {
      if (!e.target.value) {
        e.target.parentNode.querySelector('.floating-label').classList.remove('floating');
      }
    });
  });

That's it! You've created an advanced floating label input field, providing a cleaner UI and an intuitive user experience.

Whole code

<div class="floating-container">
  <input type="text" class="floating-input" placeholder=" " id="name" />
  <label for="name" class="floating-label">Name</label>
</div>


<script>
document.querySelectorAll('.floating-input').forEach(input => {
  input.addEventListener('focus', (e) => {
    e.target.parentNode.querySelector('.floating-label').classList.add('floating');
  });
  input.addEventListener('blur', (e) => {
    if (!e.target.value) {
      e.target.parentNode.querySelector('.floating-label').classList.remove('floating');
    }
  });
});
</script>

<style>
.floating-container {
  position: relative;
  margin-bottom: 20px;
  border-bottom: 2px solid #cccccc;
}
.floating-input {
  border: none;
  border-bottom: 1px solid transparent;
  width: 100%;
  outline: none;
  font-size: 16px;
  padding: 10px 0;
}
.floating-label {
  position: absolute;
  top: 10px;
  left: 0;
  font-size: 16px;
  color: #aaa;
  pointer-events: none;
  transition: all 0.2s ease;
}
.floating-label.floating {
  top: -20px;
  font-size: 12px;
  color: #2196F3;
}
</style>

Thank you for reading this article.

Creating a Modern Floating Label Input Field

HTML

CSS

JavaScript

Whole code

Comments

More inputs

Similar

See also