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 allow user input. The border should light up simply and clearly indicating which field the user is currently editing. You must have put a .form-control class on each input.

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 .form-control class on the textarea element.

If you want the textarea to autogrow you need to add .materialize-textarea to the element as well.

Textareas will auto resize to the text inside.

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');
$('#textarea1').trigger('autoresize');

Select allows user input through specified options. Make sure you add the class .form-control to the select element.

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.

Use checkboxes when looking for yes or no answers. The for attribute is necessary to bind the our custom checkbox with the input. Add the input's id as the value of the for attribute of the label.


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

One file only - 2 MB limit - Allowed types: png gif jpg jpeg
One file only - 2 MB limit - Allowed types: png gif jpg jpeg

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

We use a modified version of pickadate.js to create a materialized date picker. Test it out below!


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