UIF Core // Text Input Animated

Text Input Animated

Some label

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

Some label 2

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

Some label 3 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>

Some label 4

<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.