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-fielddiv wrapping your input and label. This helps our jQuery animate the label. This is only used in our Input and Textarea form elements.

If you don't want the Green and Red validation states, just remove the validateclass from your inputs.

Prefilling Text Inputs

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

Icon Prefixes

You can add an icon prefix to make the form input label even more clear. Just add an icon with the class prefixbefore the input and label.

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-fielddiv 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 prefixbefore the input and label.

Input Select

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 property multipleto get the multiple select and select several options.

We also support optgroups with selected.

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

You can also add disabledto the select element to make the whole thing disabled. Or if you add disabledto the options, the individual options will be unselectable.

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.

Checkboxes

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

Switches

Enabled :

Diabled :

File Input

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

File

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

File

Range Selector

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

Date Picker

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

You can use pickadate.jsAPI to customize.

Character Counter

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