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 input

The default material forms is a simple but modern underlined input design.

Material textarea

The default material forms is a simple but modern underlined input design.

Material design variant

Use the material design variant with the .form-material-bordered class to get a bordered input design.

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 as a .form-group-item.
You can add multiple prefixes and/or suffixes in a single material input.

Material select

Custom material select

Create a custom material design select using the .form-custom-select class on the <select> tag.

Multiple select

Use the multiple attribute on the <select> tag to get enable the possibility to select multiple options of your material select.

Custom select options

Option Description
inputClasses Set the input classes

Disabled material forms

To get a disabled input, just add the disabled attribute to your <input> tag.


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.