Floating Label Forms

By Rafi

forms material interaction

How do I use This?

Form inputs and textareas with floating labels on focus. This makes the label seem like a placeholder and still shows the user what the context of the input is once focussed.

HTML

<form action="">
  <div class="row">
    <div class="small-12 column">
      <div class="form-floating-label">
        <input type="email" id="email" name="email" required>
        <label for="email">Email float up</label>
      </div>
    </div>
    <div class="small-12 column">
      <div class="form-floating-label">
        <input type="text" id="password" name="password">
        <label for="password">Float password up</label>
      </div>
    </div>
    <div class="small-12 column">
      <div class="form-floating-label">
        <input type="tel" id="tel" name="tel">
        <label for="tel">Float phone up</label>
      </div>
    </div>
    <div class="small-12 column">
      <div class="form-floating-label">
        <textarea name="" id="" rows="5" placeholder=""></textarea>
        <label for="textarea">Float textarea up</label>
      </div>
    </div>
  </div>
</form>

$highlight-color: dodgerblue;

.form-floating-label {
  position: relative;

  [type='text'],
  [type='password'],
  [type='date'],
  [type='datetime'],
  [type='datetime-local'],
  [type='month'],
  [type='week'],
  [type='email'],
  [type='number'],
  [type='search'],
  [type='tel'],
  [type='time'],
  [type='url'],
  [type='color'],
  textarea {
    margin-bottom: 0;
    color: $dark-gray;
    font-size: 18px;
    font-weight: 300;
    padding: 30px 1rem 1rem 25px;
  }

  label {
    color: $medium-gray;
    font-size: 18px;
    position: absolute;
    pointer-events: none;
    left: 25px;
    bottom: 0;
    transition: all 0.2s ease-in;
    font-weight: 300;
  }

  textarea ~ label {
    top: 20px;
    font-size: 18px;
    font-weight: 300;
  }

  /* active state */
  input:focus ~ label,
  input:disabled[value] ~ label,
  &.has-value input ~ label {
    top: 0;
    font-size: 14px;
    color: $highlight-color;
    font-weight: 400;
  }

  textarea:focus ~ label,
  &.has-value textarea ~ label {
    top: 0;
    font-size: 14px;
    color: $highlight-color;
    font-weight: 400;
  }
}

.form-floating-label {
  position: relative;
  
}

.form-floating-label [type='text'],
.form-floating-label [type='password'],
.form-floating-label [type='date'],
.form-floating-label [type='datetime'],
.form-floating-label [type='datetime-local'],
.form-floating-label [type='month'],
.form-floating-label [type='week'],
.form-floating-label [type='email'],
.form-floating-label [type='number'],
.form-floating-label [type='search'],
.form-floating-label [type='tel'],
.form-floating-label [type='time'],
.form-floating-label [type='url'],
.form-floating-label [type='color'],
.form-floating-label textarea {
  margin-bottom: 0;
  color: #8a8a8a;
  font-size: 18px;
  font-weight: 300;
  padding: 30px 1rem 1rem 25px;
}

.form-floating-label label {
  color: #cacaca;
  font-size: 18px;
  position: absolute;
  pointer-events: none;
  left: 25px;
  bottom: 0;
  transition: all 0.2s ease-in;
  font-weight: 300;
}

.form-floating-label textarea ~ label {
  top: 20px;
  font-size: 18px;
  font-weight: 300;
}

.form-floating-label input:focus ~ label,
.form-floating-label input:disabled[value] ~ label,
.form-floating-label.has-value input ~ label {
  top: 0;
  font-size: 14px;
  color: dodgerblue;
  font-weight: 400;
}

.form-floating-label textarea:focus ~ label,
.form-floating-label.has-value textarea ~ label {
  top: 0;
  font-size: 14px;
  color: dodgerblue;
  font-weight: 400;
}

$('.form-floating-label input, .form-floating-label textarea').focusin(function(){
  $(this).parent().addClass('has-value');
});

$('.form-floating-label input, .form-floating-label textarea').blur(function(){
  if(!$(this).val().length > 0) {
    $(this).parent().removeClass('has-value');
  }
});

Floating Label Forms

By Rafi

Popup Contact Form

Search and Filter Hero Section

Sticky Signup Bar

Floating Label Forms

By Rafi

Similar Building Blocks

Popup Contact Form

Search and Filter Hero Section

Sticky Signup Bar