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 is only used in our Input and Textarea form elements.
The validate class leverages HTML5 validation and will add a valid and invalid class accordingly. If you don't want the Green and Red validation states, just remove the validate class from your inputs.
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled value="I am not editable" id="disabled" type="text" class="validate">
<label for="disabled">Disabled</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="col s12">
This is an inline input field:
<div class="input-field inline">
<input id="email_inline" type="email" class="validate">
<label for="email_inline">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</div>
</div>
</form>
</div>
Prefilling Text 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.
<div class="row">
<div class="input-field col s6">
<input value="Alvin" id="first_name2" type="text" class="validate">
<label class="active" for="first_name2">First Name</label>
</div>
</div>
$(document).ready(function() {
M.updateTextFields();
});
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.
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Telephone</label>
</div>
</div>
</form>
</div>
Icon Suffixes
You can also add an icon suffix. Just add an icon with the class suffix before the input and label.
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons suffix">account_circle</i>
<input id="icon_suffix" type="text" class="validate">
<label for="icon_suffix">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons suffix">phone</i>
<input id="icon_telephone_suffix" type="tel" class="validate">
<label for="icon_telephone_suffix">Telephone</label>
</div>
</div>
</form>
</div>
Custom Error or Success Messages
You can add custom validation messages by adding either data-error or data-success attributes to your helper text element.
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</div>
</form>
</div>
Changing colors
Here is a CSS template for modifying input fields in CSS. With Sass, you can achieve this by just changing a variable. The CSS shown below is unprefixed. Depending on what you use, you may have to change the type attribute selector.
/* label color */
.input-field label {
color: #000;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: #000;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* valid color */
.input-field input[type=text].valid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* invalid color */
.input-field input[type=text].invalid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* icon prefix focus color */
.input-field .prefix.active {
color: #000;
}
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 is only used in our Input and Textarea form elements.
Textareas will auto resize to the text inside.
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Textarea</label>
</div>
</div>
</form>
</div>
advanced 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'));
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.
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea"></textarea>
<label for="icon_prefix2">First Name</label>
</div>
</div>
</form>
</div>
Material Design 3
If you're looking for an alternative text input design, we also offer the Material Design 3 Textfield as an option that follows the specifications of Material Design 3.
To use, just add md3 to the input-field. Any features that has been mentioned from above also works here.
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field md3 col s6">
<input placeholder="Placeholder" id="first_name-md3" type="text" class="validate">
<label for="first_name-md3">First Name</label>
</div>
<div class="input-field md3 col s6">
<input id="last_name-md3" type="text">
<label for="last_name-md3">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field md3 col s12">
<input disabled value="I am not editable" id="disabled-md3" type="text" class="validate">
<label for="disabled-md3">Disabled</label>
</div>
</div>
<div class="row">
<div class="input-field md3 col s12">
<input id="password-md3" type="password" class="validate">
<label for="password-md3">Password</label>
</div>
</div>
<div class="row">
<div class="input-field md3 col s12">
<input id="email-md3" type="email" class="validate">
<label for="email-md3">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</div>
<div class="row">
<div class="col s12">
This is an inline input field:
<div class="input-field inline md3">
<input id="email_inline-md3" type="email" class="validate">
<label for="email_inline-md3">Email</label>
<span class="helper-text" data-error="wrong" data-success="right"></span>
</div>
</div>
</div>
<div class="row">
<div class="input-field md3 col s12">
<textarea id="textarea1-md3" class="materialize-textarea"></textarea>
<label for="textarea1-md3">Textarea</label>
</div>
</div>
</form>
</div>
Outlined
If you prefer the outlined version, just add outlined to the input-field md3.
<div class="row">
<div class="input-field md3 outlined col s6">
<input placeholder="Placeholder" id="first_name-md3-outlined" type="text" class="validate">
<label for="first_name-md3-outlined">First Name</label>
</div>
<div class="input-field md3 outlined col s6">
<input id="last_name-md3-outlined" type="text">
<label for="last_name-md3-outlined">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field md3 outlined col s12">
<input disabled value="I am not editable" id="disabled-md3-outlined" type="text" class="validate">
<label for="disabled-md3-outlined">Disabled</label>
</div>
</div>
<div class="row">
<div class="input-field md3 outlined col s12">
<input id="password-md3-outlined" type="password" class="validate">
<label for="password-md3-outlined">Password</label>
</div>
</div>
<div class="row">
<div class="input-field md3 outlined col s12">
<input id="email-md3-outlined" type="email" class="validate">
<label for="email-md3-outlined">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</div>
<div class="row">
<div class="col s12">
This is an inline input field:
<div class="input-field inline md3 outlined">
<input id="email_inline-md3-outlined" type="email" class="validate">
<label for="email_inline-md3-outlined">Email</label>
<span class="helper-text" data-error="wrong" data-success="right"></span>
</div>
</div>
</div>
<div class="row">
<div class="input-field md3 outlined col s12">
<textarea id="textarea1-md3-outlined" class="materialize-textarea"></textarea>
<label for="textarea1-md3-outlined">Textarea</label>
</div>
</div>
File Input
If you want to style an input button with a path input we provide this structure.
<form action="#">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
You can also use the multiple attribute to allow multiple file uploads.
<form action="#">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more files">
</div>
</div>
</form>
Character Counter
Use a character counter in fields where a character restriction is in place.
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="input_text" type="text" data-length="10">
<label for="input_text">Input text</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="textarea2" class="materialize-textarea" data-length="120"></textarea>
<label for="textarea2">Textarea</label>
</div>
</div>
</form>
</div>
Initialization
There are no options for this plugin, but if you are adding these dynamically, you can use this to initialize them.
$(document).ready(function() {
$('input#input_text, textarea#textarea2').characterCounter();
});