Text inputs

Forms are made to let the user send data through input fields. To design it, 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.

You can click but not edit in readonly mode.


Textareas are usefull to let the user send large messages.
To use it, add the same .form-control class as before.
Initially, our textareas are not resizable horizontally, and the max and min heights are defined. To change it, you can use rows="" attribute.

Inline forms

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

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.

Input prefix & suffix

To use forms prefixes and/or 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

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.