Home Documentation
Getting started General
Components
Forms
Utilities
Check changelog.
0.5.3

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

Tips

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 :

Methods

Method Description
Axentix.setupFormsListeners() This method is scanning the HTML page to setup all the inputs.
Axentix.detectAllInputs() This method is checking every input status to reinitialize them, which is pretty useful if they have been added dynamically.