VCL material-style-inputs

Material design style inputs.

Features

• Adapt the standard input styling such that there is only a border on the bottom.
• Animated form labels which overlay the input to reduce visual clutter

Usage

By default the label is rendered over the input

Basic

The label must float by adding the vclMaterialFloatingLabel if the input has any value or a placeholder

Floating

A focused input must also have the vclMaterialFocused class

Focused

The embedded input group needs a modifier class for correct label positioning

EmbeddedInputGroup

Classes

• vclMaterial

Modifiers

• vclMaterialFloatingLabel
• vclMaterialFocused
• vclMaterialInputGroupEmbPrepItem

Demo

example.html on GH-pages.