If you are having trouble with the labels overlapping prefilled content, Try adding class="active" to the label

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.

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.

Textareas will auto resize to the text inside.

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.

Select allows user input through specified options. Make sure you wrap it in a .input-field for proper alignment with other text fields.

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

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

Checkboxes are used when the user want to make selection out of a group of items.

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

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

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

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