Components

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

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.

  First Name
  

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 .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.

  

    Textarea
    
  

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

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

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.

  

    
    Red
  
  

    
    Yellow
  
  

    
    Green
  
  

    
    Brown
  

Checkboxes

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.

  

    
    Red
  
  

    
    Yellow
  
  

    
    Green
  
  

    
    Brown
  

Switches

  
    Off
    
    
    On
  




  
    Off
    
    
    On
  

File Input

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

  File input label
  

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

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

Date Picker

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