Text Inputs

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-fielddiv wrapping your input and label. This is only used in our Input and Textarea form elements.

The validate class leverages HTML5 validation and will add a validand invalidclass accordingly. If you don't want the Green and Red validation states, just remove the validateclass from your inputs.

If you are having trouble with the labels overlapping prefilled content, Try adding class="active"to the label.
You can also call the function M.updateTextFields(); to reinitialize all the Materialize labels on the page if you are dynamically adding inputs.

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

You can add custom validation messages by adding either data-erroror data-successattributes to your helper text element.

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-fielddiv wrapping your input and label. This is only used in our Input and Textarea form elements.

Note: When dynamically changing the value of a textarea with methods like jQuery's .val(), you must trigger an autoresize on it afterwords because .val() does not automatically trigger the events we've binded to the textarea.

$('#textarea1').val('New Text');M.textareaAutoResize($('#textarea1'));

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

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

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

$(function() {    $('input#input_text, textarea#textarea2').characterCounter();});