Material forms

Material design forms. Build simple and modern forms using our material inputs.

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 :

You can click but not edit in readonly mode.

Material checkbox / radio

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

Material form radio
Material form 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.

Material select

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.


You'll want to change the material color to make it match to your website design.
The following code makes you able to change it :


Method Description
Axentix.updateInputs() This method is scanning the HTML page to update all the inputs.