Inputs

Input

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

Name

Material design variant

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

Firstname

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.

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.

Disabled input

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

Subject

Basic text input

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

Name

Inline forms

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

Name

Custom input prefix & suffix

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

Name

suffix

Styling

Common methods & styling

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