Material forms

The material forms are useful to create a modern website.
Use our .form-material class on the form container to create a material design form, with simple and nice animations.
Note that you can disable the custom design on a specific element by adding the .form-default class on the corresponding form field.
Note that you can change the animation direction of the border-bottom from right to left by adding the .form-rtl class on the corresponding .form-field.
These designs require JavaScript.

Material inputs

The material forms include a simple but modern design :

Name

Email

Subject

Address You can click but not edit in readonly mode.

A textarea

Material checkbox / radio

The material forms provide a modern design for the checkboxes and radios :

Material form radio Radio Checked Full option Disabled

Material form checkbox Checkbox Checked Disabled checkbox

Material input prefix & suffix

To use material forms prefixes and/or material forms suffixes, you have to wrap your input inside a .form-group class element.
Then, add anything inside this form-group.
You can add multiple prefixes and/or suffixes in a single material input.

Name

Material select

Select an option 123

Multiple select

Since the multiple select is not available in a material design, you have to add the .form-default class to your .form-field to make it work.

Methods