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.

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.

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 Materialize.updateTextFields(); to reinitialize all the Materialize labels on the page if you are dynamically adding inputs.

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.

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.

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.

Select

Select allows user input through specified options. Make sure you wrap it in a .input-field for proper alignment with other text fields. Remember that this is a jQuery plugin so make sure you initialize this in your document ready.

Materialize Select

You can add the property multiple to get the multiple select and select several options.

Materialize Multiple Select

We also support optgroups in our selects.

Optgroups

You can add icons to your options in any type of select. In the option you add the image source with the data-icon attribute. You can add the left or right class to align your icon. You can also add the circle class to your icon.

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();
});

Updating/Destroying Select

If you want to update the items inside the select, just rerun the initialization code from above after editing the original select. Or you can destroy the material select with this function below, and create a new select altogether

$('select').material_select('destroy');

Radio Buttons

Radio Buttons are used when the user must make only one selection out of a group of items. The for attribute is necessary to bind our custom radio button with the input. Add the input's id as the value of the for attribute of the label.

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.

Range

Add a range slider for values with a wide range. This one is set to be a number between 0 and 100. We have two different types of sliders. nouiSlider is a 3rd party plugin which we've modified. To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.

noUiSlider

See noUiSlider's official documentation here to see a variety of slider options

Help Materialize Grow

We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.