Forms Elements

help

Input fields

Basic

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.

This is an inline input field:

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.

Example

                                                    
$(document).ready(function() {
    Materialize.updateTextFields();
});
                                                        
                                                    

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.

account_circle
phone

Custom Error or Success Messages

You can add custom validation messages by adding either data-error or data-success attributes to your input field labels.

Character Counter

Use a character counter in fields where a character restriction is in place.

Textarea

Basic

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.

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.

mode_edit

Character Counter

Use a character counter in fields where a character restriction is in place.

Select

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

Multiple Select

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

Optgroups Select

We also support optgroups in our selects.

Images in select

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.

Browser Default Select

You can add the class browser-default to get the browser default.

Disabled Styles Select

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.

Radio Buttons

Basic

Radio Buttons are used when the user must make only one selection out of a group of items.

With Gap

To create a radio button with a gap, add class="with-gap" to your input. See the example below.

Checkbox Buttons

Basic

Use checkboxes when looking for yes or no answers.

Filled In

To create a checkbox button with a Filled In, add class="filled-in" to your input. See the example below.

Switches Buttons

Default
Red
Yellow
Green
Disabled
Pink
Purple
Deep Purple
Indigo
Teal

File Input

Basic

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

File

Multiple

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

File

HTML5 Range

Add a range slider for values with a wide range. This one is set to be a number between 0 and 100.

Date Picker

                                                    
<label for="birthdate">Birthdate</label>
<input type="date" class="datepicker" id="birthdate">
                                                        
                                                    
                                                    
$('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15 // Creates a dropdown of 15 years to control year
});
                                                        
                                                    

Time Picker

                                                    
<label for="timepicker">Lunchtime</label>
<input type="text" class="timepicker">
                                                        
                                                    
                                                    
$('.timepicker').pickatime({
    default: 'now', // Set default time: 'now', '1:30AM', '16:30'
    fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
    twelvehour: true, // Use AM/PM or 24-hour format
    donetext: 'OK', // text for done-button
    cleartext: 'Clear', // text for clear-button
    canceltext: 'Cancel', // Text for cancel-button
    autoclose: false, // automatic close timepicker
    ampmclickable: true, // make AM PM clickable
    aftershow: function() {} //Function for after opening timepicker
});
                                                        
                                                    

Autocomplete

Add an autocomplete dropdown below your input to suggest possible values.

textsms
                                                    
<div class="row">
    <form action="#" class="col s12">
        <div class="input-field">
            <i class="material-icons prefix">textsms</i>
            <input type="text" id="autocomplete-input" class="autocomplete">
            <label for="autocomplete-input">Autocomplete</label>
        </div>
    </div>
</div>
                                                        
                                                    
                                                    
$('input.autocomplete').autocomplete({
    data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
    },
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    onAutocomplete: function(val) {
        // Callback function when value is autcompleted.
    },
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
});