Input Labels

Create input fields with labels and validation messages.

Labeled Input Class

Use the wj-labeled-input class and some CSS to create input fields with floating labels and validation messages.

The labeled inputs are similar to text fields with floating labels implemented in Material Design Lite and to the "paper-input" element implemented in Polymer.

The CSS rules used in this sample take advantage of Wijmo's pseudo class extensions which include wj-state-focused, wj-state-empty, and wj-state-invalid.

Static Labels

If you don't like the animated labels, make them static by adding the wj-static-labels class to the element that contains the input controls. For example:

Modal Dialogs

You can use the input labels in modal dialogs as well, by placing the form element in a Popup control. For example: