Material Forms

Forms are the standard way to receive user inputted data. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms.

Input fields

Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing. You must have a .input-field div wrapping your input and label. This helps our jQuery animate the label. This is only used in our Input and Textarea form elements. If you don't want the Green and Red validation states, just remove the validate class from your inputs.


Icon Prefixes

You can add an icon prefix to make the form input label even more clear. Just add an icon with the class prefix before the input and label.


account_circle
phone

Custom Error or Success Messages

You can add custom validation messages by adding either data-error or data-success attributes to your input field labels.


Textarea

Textareas allow larger expandable user input. The border should light up simply and clearly indicating which field the user is currently editing. You must have a .input-field div wrapping your input and label. This helps our jQuery animate the label. This is only used in our Input and Textarea form elements.Textareas will auto resize to the text inside.

Icon Prefixes
mode_edit

Select

Select allows user input through specified options. Make sure you wrap it in a .input-field for proper alignment with other text fields.


Radio Buttons

Radio Buttons are used when the user must make only one selection out of a group of items


Checkboxes

Use checkboxes when looking for yes or no answers. The for attribute is necessary to bind the our custom checkbox with the input. Add the input's id as the value of the for attribute of the label.


Switches


Disabled

File Input

If you want to style an input button with a path input we provide this structure.

File
Multiple

You can also use the multiple attribute to allow multiple file uploads.

File

Range

HTML5 Range


Character Counter

Use a character counter in fields where a character restriction is in place.