The default material design input 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.

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.

Helper text

A helper text is usefull to show informations about what the input should recieve.
To create a helper text, add a span with the .form-helper class below your input.

This is a helper text.

Disabled input

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

Basic text input

Without the material-form class set, the input design becomes classic and gets a shadow once focused.

Inline forms

Create an inline form by using the .form-inline class on the .form-field element.

Custom input prefix & suffix

You can custom the content to match the design you want using our utilities classes.



CSS Variable Default value Description
--ax-form-helper-size 0.75rem Form helper font-size.
--ax-form-control-border 1px solid #bbb8b8 Form control border.
--ax-form-disabled-bg-color #c8c8c8 Disabled form background color.
--ax-form-disabled-color #787878 Disabled form text color.

Common methods & styling

For all the common methods and styling properties, please refer to the Material forms page.