Input material

Metro 4 provides simple classes and structures to create input fields in Material Design Style.

About

Designed for using with PhoneGap. Component used special -webkit css rules.

In Metro 4, you can use enhancement version of input control to create input in Material Design Style. To define it, add attribute data-role="materialinput" to HTML input element. You can assign role input to any text inputs: text, password, email, etc.

                    <input type="text" data-role="materialinput"
                        placeholder="Enter your email">
                

Input with label

                    <input type="text" data-role="materialinput"
                        data-label="User email"
                        placeholder="Enter your email">
                

Input with label and informer

                    <input type="text" data-role="materialinput"
                        data-label="User email"
                        data-informer="Enter a valid email address"
                        placeholder="Enter your email">
                

Input with label, informer and icon

                    <input type="text"
                        data-role="materialinput"
                        data-icon="<span class='mif-envelop'>"
                        data-label="User email"
                        data-informer="Enter a valid email address"
                        placeholder="Enter your email">
                

Customize

You can change visual style with special classes attributes: data-cls-component, data-cls-input, data-cls-label, data-cls-informer, data-cls-icon, data-cls-line.

                    <input type="text" data-role="materialinput"
                           placeholder="Enter your email"
                           data-icon="<span class='mif-envelop'>"
                           data-label="User email"
                           data-informer="Enter a valid email address"
                           data-cls-line="bg-cyan"
                           data-cls-label="fg-cyan"
                           data-cls-informer="fg-lightCyan"
                           data-cls-icon="fg-darkCyan"
                    >