Material Forms

Simple Textfield

Use input type="text" with .mdl-textfield, .mdl-js-textfield, .mdl-textfield__input, .mdl-textfield__label.

Textfield with Floating Label

To make the label floating use .mdl-textfield--floating-label.

Input text

Use input type="text".

Password

Use input type="password".

Email

Use input type="email".

URL

Use input type="url".

Telephone Number

Use input type="tel".

Number

Not Supported in IE

Use input type="number".

Date

Not Supported in IE

Use input type="date".

Time

Not Supported in IE

Use input type="time".

Date & Time

Not Supported in IE

Use input type="datetime-local".

Week

Not Supported in IE

Use input type="week".

Month

Not Supported in IE

Use input type="month".

Range Sliders

Default Slider

Use input type="ranger" with .mdl-sliderand .mdl-js-slider classes .

Starting value

Set the default starting value by using value attribute.

Toggle

Checkbox

Use input type="checkbox" with .mdl-js-checkbox, .mdl-js-ripple-effect, .mdl-checkbox__input and .mdl-checkbox__label.

Radio

Use input type="radio" with mdl-radio, .mdl-js-radio, .mdl-js-ripple-effect, .mdl-radio__button and .mdl-radio__label.

Icon Toggle

Use input type="checkbox" and use .mdl-icon-toggle__label, .material-icons with an i tag with your relative font icon class .

Switch

Use input type="checkbox" with mdl-switch, .mdl-js-switch, .mdl-js-ripple-effect, .mdl-switch__input and .mdl-switch__label.