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 class="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.

Forms using

To set an input field, wrap your label and input inside a div with a .form-field class.
To design your inputs, simply add the .form-control class on it.
Readonly and disabled inputs are designed too.


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


CSS Variable Default value Description
--ax-form-material-color #4D9F85 Global material color.
--ax-form-material-transition-duration 0.3s Material form transition duration.
--ax-form-material-label-color #7C7C7C Material form label color.
--ax-form-material-border 2px solid #c7c7c7 Material form border.
--ax-form-material-disabled-border 2px dashed #c7c7c7 Material form disabled border.
--ax-form-material-active-border-width 2px Material form active border width.
--ax-form-material-active-border-style solid Material form active border style.
--ax-form-material-after-z-index 15 Material form active bar z-index.