Floating Label Form

By Rafi

F6
#
forms material interaction accessibility
How do I use This?

This Building Block has form inputs with floating labels once content is added. This input wrapper hides the label visualy but allows a screen reader to access it for context. Floating the label shows the user what the context of the input is once content is typed in.

HTML
<form class="callout text-center">
  <h2>Become A Member</h2>
  <div class="floated-label-wrapper">
    <label for="full-name">Full name</label>
    <input type="text" id="full-name" name="full name input" placeholder="Full name">
  </div>
  <div class="floated-label-wrapper">
    <label for="email">Email</label>
    <input type="email" id="email" name="email input" placeholder="Email">
  </div>
  <div class="floated-label-wrapper">
    <label for="pass">Password</label>
    <input type="password" id="pass" name="password input" placeholder="Password">
  </div>
  <input class="button expanded" type="submit" value="Sign up">
</form>


.floated-label-wrapper {
  position: relative;

  label {
    background: $white;
    color: $primary-color;
    font-size: 0.75rem;
    font-weight: 600;
    left: 0.75rem;
    opacity: 0;
    padding: 0 0.25rem;
    position: absolute;
    top: 2rem;
    transition: all 0.15s ease-in;
    z-index: -1;

    input[type=text],
    input[type=email],
    input[type=password] {
      border-radius: 4px;
      font-size: 1.75em;
      padding: 0.5em;
    }

    &.show {
      opacity: 1;
      top: -0.85rem;
      z-index: 1;
      transition: all 0.15s ease-in;
    }
  }
}





.floated-label-wrapper {
  position: relative;
}

.floated-label-wrapper label {
  background: #fefefe;
  color: #1779ba;
  font-size: 0.75rem;
  font-weight: 600;
  left: 0.75rem;
  opacity: 0;
  padding: 0 0.25rem;
  position: absolute;
  top: 2rem;
  transition: all 0.15s ease-in;
  z-index: -1;
}

.floated-label-wrapper label input[type=text],
.floated-label-wrapper label input[type=email],
.floated-label-wrapper label input[type=password] {
  border-radius: 4px;
  font-size: 1.75em;
  padding: 0.5em;
}

.floated-label-wrapper label.show {
  opacity: 1;
  top: -0.85rem;
  z-index: 1;
  transition: all 0.15s ease-in;
}
JS
$(function () {
  var showClass = 'show';

  $('input').on('checkval', function () {
    var label = $(this).prev('label');
    if(this.value !== '') {
      label.addClass(showClass);
    } else {
      label.removeClass(showClass);
    }
  }).on('keyup', function () {
    $(this).trigger('checkval');
  });
});

Similar Building Blocks

forms

Mobile App Message Bar

F6
by Rafi
forms

Translucent Form Overlay

F6
by Kevin
forms

Contact Section Footer

F6
by Rafi