mdb-ui-kit/docs/4.0/material-design/forms.md

layout	title	group
docs	Forms	material-design

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

Contents

• Will be replaced with the ToC, excluding the "Contents" header {:toc}

Form controls flavored by Material Design for Bootstrap customizations such as bmd-label-floating. {% example html %}

Email address We'll never share your email with anyone else.

Password

Example select 1 2 3 4 5

Example multiple select 1 2 3 4 5

Example textarea

File input This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Check me out

Cancel Submit {% endexample %}

Classes

Below is a complete list of options supported by Material Design for Bootstrap and the classes that customize them. Additional documentation is available for each group.

Classes	Used for	Notes
.bmd-form-group	Any group of form controls (e.g. combination of label/input).	{% markdown %}This is automatically added by javascript, but if your code is templated, adding `.bmd-form-group` to your form groups or otherwise your groups of controls can reduce rendering churn since the javascript will not add the class after the initial page rendering. This can also demarcate complex label/input combinations inside the same `.form-group`.{% endmarkdown %}
.bmd-form-group-sm	{% markdown %}Added to the `.bmd-form-group`, this will render the combination label/input/help in the smaller variation.{% endmarkdown %}	{% markdown %}{% endmarkdown %}
.bmd-form-group-lg	{% markdown %}Added to the `.bmd-form-group`, this will render the combination label/input/help in the larger variation.{% endmarkdown %}	{% markdown %}{% endmarkdown %}
.bmd-help	Any help text	{% markdown %}Mark any help text next to an input with `.bmd-help` to gain behaviors such as showing upon focus.{% endmarkdown %}

Form groups

The .bmd-form-group class is usually added to the .form-group element. Whereas the .form-group adds structure to forms by providing margin-bottom around a label and control pairing, the only purpose of the .bmd-form-group is to demarcate Material Design behaviors for a combination of label/input. Focus/hover styling for the label/input is determined based on the .bmd-form-group.

The .bmd-form-group is added automatically by javascript through basic discovery of the outer demarcation of the component defined by the Bootstrap standard markup. If your code is templated, you may want to add .bmd-form-group to the markup directly to prevent any rendering churn from the javascript determining and adding the class to the markup. In custom situations, the javascript may not be able to properly resolve the location for the .bmd-form-group, so in rare or complex cases you may need to wrap your markup in an .bmd-form-group to get appropriate focus/hover behavior.

{% example html %}

Example label

Another label

{% endexample %}

Inline forms

Use the .form-inline class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:

• Controls are display: inline-block to provide alignment control via vertical-align and margin.
• Controls receive width: auto to override the Bootstrap default width: 100%.
• Controls only appear inline in viewports that are at least 768px wide to account for narrow viewports on mobile devices.

Because of this, you may need to manually address the width and alignment of individual form controls. Lastly, as shown below, you should always include a <label> with each form control.

Visible labels

{% example html %}

Name

Email

Send invitation {% endexample %}

Help blocks

bmd-help can be used for form tips (known as help-block in v3 which has been removed in v4). These elements are absolutely positioned but hidden, they occupy the space when hidden to prevent form bouncing.

Multiple

Multiple help blocks will cause the form to bounce because subsequent blocks are relatively positioned. The space used when hidden is that of a single help comment only.

{% example html %}

Email address (two help blocks) We'll never share your email with anyone else. And this is probably from a second plugin showing in a non-optimal way

Password

{% endexample %}