What the heck happened to the rest of the UIF documentation?

All the CSS-only components have been moved across to the Storybook version of our UIF docs.

The jQuery dependent components are considered legacy, and while still currently available, are not going to be actively developed upon any longer. Also, it's a schlep trying to get jQuery to work within webpack/storybook, so they can stay here.

Please consider using CSS-only components for maximum ongoing happiness. 💖

Text Input Animated

<div class="form-field" data-js="form-field">
  <label for="input-text-example" class=" form-field__label" >Some label</label>
  <input type="text" id="input-text-example" name="input-text-example" class=" input-text" placeholder="Place holder text">


  
</div>

<div class="form-field" data-js="form-field">
  <label for="input-text-example-2" class=" form-field__label" >Some label 2</label>
  <input type="text" id="input-text-example-2" name="input-text-example-2" class=" input-text" value="Test value 2" placeholder="Place holder text">


  
</div>
This is required 
<div class="form-field has-error" data-js="form-field">
  <label for="input-text-example-3" class=" form-field__label" >Some label 3</label>
  <input type="text" id="input-text-example-3" name="input-text-example-3" class=" input-text" value="Test value 3" placeholder="Place holder text">


  <span class="form-field__msg">This is required</span>
</div>

<div class="form-field" data-js="form-field">
  <label for="input-text-example-4" class=" form-field__label" >Some label 4</label>
  <input type="text" id="input-text-example-4" name="input-text-example-4" class=" input-text has-info" value="Test value 4" placeholder="Place holder text">


  
</div>

Introduction

The UIF inputs expect short labels that don't wrap onto the next line. This shows the preferred styling and usage of the inputs when used in a form.

Usage

Class name Effect Remarks
.form-field Wraps around the input tag to add space around groups of inputs Required.
.form-field__label Added to label tag for label-specific styling. The label animation design is applied to this element if the relevant JS hook (see below) is added to the .form-field and JS runs successfully. Required.
.form-field__msg Used to add text below an input
Used with a .has-error class on its parent to show error messages. 		Optional.
.form-field--space-y Adds vertical space to the .form-field Optional.
JavaScript hook
[data-js="form-field"] Use this JavaScript hook on the .form-field if you wish the field to use the animated label design.
Detects if an input is filled, and applies the relevant style. 		Required.