Material forms

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.

Name

Material textarea

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

Textarea

Material design variant

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

Firstname

Textarea

Material checkbox / radio

The material forms provide a modern design for the checkboxes and radios :

Material form radio Radio Checked Full option Disabled

Material form checkbox Checkbox Checked Disabled 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.

Name

Material select

Select an option 1 2 3

Custom material select

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

1 2 3 4 5

Multiple select

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

Select different options 1 2 3 4 5

Custom select options

Disabled material forms

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

Subject

Methods

Styling