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.

Methods

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

Styling

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 0.08em solid #c7c7c7 Material form border.
--ax-form-material-disabled-border 0.08em dashed #c7c7c7 Material form disabled border.
--ax-form-material-active-border-width 0.1em Material form active border width.
--ax-form-material-active-border-style solid Material form active border style.