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.
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input 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 id="username" type="text" class="validate">
<label for="username">Username</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>
</form>
</div>
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="mdi-action-account-circle prefix"></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="mdi-communication-phone prefix"></i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Telephone</label>
</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 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.
<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>
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="mdi-editor-mode-edit prefix"></i>
<textarea id="icon_prefix2" class="materialize-textarea"></textarea>
<label for="icon_prefix2">First Name</label>
</div>
</div>
</form>
</div>
Select
Select allows user input through specified options.
<label>Materialize Select</label>
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Browser Select</label>
<select class="browser-default">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Disabled Styles
You can also add disabled
to the select element to make the whole thing disabled. Or if you add disabled
to the options, the individual options will be unselectable.
<label>Materialize Disabled</label>
<select disabled>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Browser Disabled</label>
<select class="browser-default" disabled>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Initialization
You must initialize the select element as shown below. In addition, you will need a separate call for any dynamically generated select elements your page generates.
$(document).ready(function() {
$('select').material_select();
});
Radio Buttons
Radio Buttons are used when the user must make only one selection out of a group of items
Add radio buttons to a group by adding the name attribute along with the same corresponding value for each of the radio buttons in the group. Create disabled radio buttons by adding the disabled attribute as shown below.
<form action="#">
<p>
<input name="group1" type="radio" id="test1" />
<label for="test1">Red</label>
</p>
<p>
<input name="group1" type="radio" id="test2" />
<label for="test2">Yellow</label>
</p>
<p>
<input class="with-gap" name="group1" type="radio" id="test3" />
<label for="test3">Green</label>
</p>
<p>
<input name="group1" type="radio" id="test4" disabled="disabled" />
<label for="test4">Brown</label>
</p>
</form>
Options
To create a radio button with a gap, add class="with-gap"
to your input. See the example below.
<p>
<input class="with-gap" name="group3" type="radio" id="test5" checked />
<label for="test5">Red</label>
</p>
Checkboxes
Checkboxes
<form action="#">
<p>
<input type="checkbox" id="test5" />
<label for="test5">Red</label>
</p>
<p>
<input type="checkbox" id="test6" checked="checked" />
<label for="test6">Yellow</label>
</p>
<p>
<input type="checkbox" id="test7" checked="checked" disabled="disabled" />
<label for="test7">Green</label>
</p>
<p>
<input type="checkbox" id="test8" disabled="disabled" />
<label for="test8">Brown</label>
</p>
</form>
Switches
<!-- Switch -->
<div class="switch">
<label>
Off
<input type="checkbox">
<span class="lever"></span>
On
</label>
</div>
<!-- Disabled Switch -->
<div class="switch">
<label>
Off
<input disabled type="checkbox">
<span class="lever"></span>
On
</label>
</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">
<input class="file-path validate" type="text"/>
<div class="btn">
<span>File</span>
<input type="file" />
</div>
</div>
</form>
Range
Add a range slider for values with a wide range. This one is set to be a number between 0 and 100.
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
Date Picker
We use a modified version of pickadate.js to create a materialized date picker. Test it out below!
<input type="date" class="datepicker">
Initialization
At this time, not all pickadate.js options are working with our implementation
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});