Inputs

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.

Name

Email Email

Subject

Address You can click but not edit in readonly mode.

Textarea

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.

A textarea

Another textarea

Inline forms

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

Name

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.

Name 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

Name

Custom input prefix & suffix

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

Name

suffix