Floating Label Form

By Rafi

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;
}

$(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');
  });
});

Floating Label Form

By Rafi

Mobile App Message Bar

Translucent Form Overlay

Contact Section Footer

Floating Label Form

By Rafi

Similar Building Blocks

Mobile App Message Bar

Translucent Form Overlay

Contact Section Footer