Materialize CSS forms are used to receive user inputted data & it has the following types of form elements: Input fields, radio buttons, checkboxes, select, range, pickers, etc.
Input fields allow the user to input.To create input field, wrap input and label inside the container and assign it to .input-field
class.
General Syntax
<div class="input-field">
<input name="name" id="id" type="text" />
<label for=""></label>
</div>
Source Code
<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>
Textarea is used for larger user input. To create Materialize textarea, follow the given below steps.
.input-field
class.
.materialize-textarea
class to the textarea base class.
General Syntax
<div class="input-field">
<textarea id="textarea" class="materialize-textarea"> </textarea>
<label for="textarea">Textarea</label>
</div>
Source Code
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea id="textarea" class="materialize-textarea"> </textarea>
<label for="textarea">Textarea</label>
</div>
</div>
</form>
</div>
Note: When textarea value is dynamically changing like jQuery's .val()
then in this case you must have to trigger an auto resize on it afterwords.
$('#textarea').val('New Text');
$('#textarea').trigger('autoresize');
Select form allows user to select one option, multiple option or optgroup from the given list of options.
Basic steps to create Materialize CSS select forms.
.input-field
class.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('select').formSelect();
});
General Syntax
<select name="" id="">
<option value="">value</option>
</select>
Source Code
<div class="input-field col s12">
<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>Materialize Select</label>
</div>
<div class="input-field col s12">
<select multiple>
<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>Materialize Multiple Select</label>
</div>
<div class="input-field col s12">
<select>
<optgroup label="team 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</optgroup>
<optgroup label="team 2">
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</optgroup>
</select>
<label>Optgroups</label>
</div>
<div class="input-field col s12 m6">
<select class="icons">
<option value="" disabled selected>Choose your option</option>
<option value="" data-icon="images/sample-1.jpg">example 1</option>
<option value="" data-icon="images/office.jpg">example 2</option>
<option value="" data-icon="images/yuna.jpg">example 3</option>
</select>
<label>Images in select</label>
</div>
<div class="input-field col s12 m6">
<select class="icons">
<option value="" disabled selected>Choose your option</option>
<option value="" data-icon="images/sample-1.jpg" class="left">example 1</option>
<option value="" data-icon="images/office.jpg" class="left">example 2</option>
<option value="" data-icon="images/yuna.jpg" class="left">example 3</option>
</select>
<label>Images in select</label>
</div>
<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>
Radio buttons are used to select only one option from the group of items.Make sure that, the for
attribute value of the label
is same as the input
id value.
General Syntax
<label>
<input name="inputname" type="radio" id="inputid">
<span for="inputid">Input Text</span>
</label>
Source Code
<form action="#">
<p>
<label>
<input name="group1" type="radio" id="webdesign" checked>
<span for="webdesign">Web Design</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" id="webdesign">
<span for="webdesign">Graphics Design</span>
</label>
</p>
<p>
<label>
<input class="with-gap" name="group1" type="radio" id="appdesign">
<span for="appdesign">App design</span>
</label>
</p>
</form>
Checkbox is used to select either yes or no answers.
keep in mind that the for
attribute of label
is necessary to bind custom checkbox with the input.
Make sure that label
, for
attribute value will be same as the id
attribute value of the checkbox
.
General Syntax
<label for="checkboxid">
<input type="checkbox" id="checkboxid">
<span>Checkbox Text</span>
</label>
Source Code
<form action="#">
<p>
<label for="php">
<input type="checkbox" id="php">
<span>PHP</span>
</label>
</p>
<p>
<label for="asp">
<input type="checkbox" checked="checked" id="asp" />
<span>ASP</span>
</label>
</p>
<p>
<label for="rubby">
<input type="checkbox" class="filled-in" checked="checked" id="rubby">
<span>Ruby</span>
</label>
</p>
<p>
<label for="bootstrap5">
<input id="indeterminate-checkbox" type="checkbox" id="bootstrap5">
<span>Bootstrap 5 </span>
</label>
</p>
<p>
<label for="materialize">
<input type="checkbox" checked="checked" disabled="disabled" id="materialize">
<span>Materialize</span>
</label>
</p>
<p>
<label for="tailwind">
<input type="checkbox" disabled="disabled" id="tailwind">
<span>Tailwind</span>
</label>
</p>
</form>
Switches are basically special checkboxes that are used for binary states such as on / off.
Source Code
<div class="switch">
<label> Off <input type="checkbox" checked>
<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>
If you want to take input as a path then use input of type file.
Source Code
<form action="" method="post">
<div class="file-field input-field">
<div class="btn" style="padding-top:0px;">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
To create multiple file upload, simply add .multiple
class in your input file to allow multiple file uploads.
Source Code
<form action="" method="post">
<div class="file-field input-field">
<div class="btn" style="padding-top:0px;">
<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>
Range slider is used for the value with a wide range.There are mainly two types of range slider such as HTML 5 & nouiSlider.
It is a a 3rd party plugin which will be modified.To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.
Source Code
<script type="text/javascript">
var slider = document.getElementById('test-slider');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
step: 1,
orientation: 'horizontal', // 'horizontal' or 'vertical'
range: {
'min': 0,
'max': 100
}
});
</script>
Source Code
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
The datepicker is used to select a date from the calendar.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.datepicker');
var instances = M.Datepicker.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.datepicker').datepicker();
});
Source Code
<div class="input-field">
<input id="birthdate" type="text" class="datepicker">
<label for="birthdate">Date Picker</label>
</div>
The time picker allows users to select time from the clock.
Source Code
<div class="input-field">
<input id="lunchtime" type="text" class="timepicker">
<label for="lunchtime">Time Picker</label>
</div>
Autocomplete feature is used to suggest the possible value in the form.You can also populate the suggestion list dynamically.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
});
});
Source Code
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">textsms</i>
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
</div>
</div>
</div>
</div>
It applies the restriction on input character length. To create a character counter, add data-length
property in the input fields and then initializes it through jQuery. Basically, it is mainly used where the input character length is mandatory.
Initialization
$(document).ready(function() {
$('input#input_text, textarea#textarea2').characterCounter();
});
Source Code
<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>
You can add an icon prefix with prefix
class before the input and label to make form input label even more clear.
Source Code
<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>
Custom validation messages can be express by adding either data-error or data-success attributes to your helper text element.
Source Code
<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>
Materialize forms are the standard way to take user inputted data. There are different predefined Materialize CSS form input classes that are used with the HTML form's input field such as Input fields, radio buttons, checkboxes, selects, range, pickers to make more elegant input fields. You can also add icon prefixes with the form inputs of Materialize.