component

Label

A simple form label.

  <div class="field">
    <div class="control">
      <label class="label">User name</label>
      <input class="input" type="text">
    </div>
  </div>

User name

Floating type

You can easily change the type of label to make it floating by adding the has-floating-label modiffier to the control partent class and placing the label after the input.

  <div class="field pt-3">
    <div class="control has-floating-label">
      <input class="input" type="text" placeholder="hola">
      <label class="label">User name</label>
    </div>
  </div>

User name

Variables

  :root {
    --label-font-size: var(--base-font-size);
    --label-color:  var(--input-color);
    --label-space: .5em;
    --label-transition: .4s ease;
  }