Floating labels

Floating labels rely on JavaScript to add/remove the -active class whenever the input focuses or has a value.

Input boxes

<div id="floating-label-1" class="m-input__wrapper -floatingLabel">
  <input class="a-input -xl" type="text" id="floating-label-input">
  <label for="floating-label-input">Placeholder text</label>
</div>

<script>chi.floatingLabel(document.getElementById('floating-label-1'));</script>

Select boxes

<div id="floating-label-2" class="m-input__wrapper -floatingLabel">
  <select class="a-input -xl" id="floating-label-select">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <label for="floating-label-select">Placeholder text</label>
</div>

<script>chi.floatingLabel(document.getElementById('floating-label-2'));</script>

Preventing memory leaks

Floating label components have a dispose function to free all resources attached to the element, such as event listeners and object data. You must call this method when you want to remove the component.

var elem = document.getElementById('floating-label-1');
var floatingLabel = chi.floatingLabel(elem);
// do stuff
floatingLabel.dispose();

TipIt is safe to call the floatingLabel method more than once, as it will return any previously created floating label component associated to the trigger.

var elem = document.getElementById('floating-label-1');
var floatingLabel = chi.floatingLabel(elem);
var elem2 = document.getElementById('floating-label-1');
var floatingLabel2 = chi.floatingLabel(elem2);
floatingLabel === floatingLabel2; // returns true

floatingLabel.dispose(); // Only have to do it once.