Material Design Forms

Question

I am doing research on Material design and some of the guidelines described in material design.

A section that I seem to be missing (not sure if it should be covered), is how Google approaches Fieldsets. The documentation does cover individual inputs, but never looks into Fieldset.

One approach that I've seen frequently, is to have Forms displayed on a singular Card. Other approaches prefer to have it on the simple standard background.

What is the most "Material Design" way to present Fieldsets? I do know that there is not right or wrong, but there should be a theoretically correct approach.

score 8 · Accepted Answer · edited Mar 06 '19 at 08:58

It seems like the intended practice might be to use Steppers for logical groupings of forms. Depending on your implementation, this might be hard to do.

The alternative I've used is cards with lists/dividers, e.g. in Angular Material something like this. It can get unwieldy on mobile if overdone though.

<md-card style="max-width: 500px;">
    <md-card-content md-padding>
        <p class="md-heading">Title</p>
        ...content...
    </md-card-content>
    <md-divider></md-divider>
    <md-card-content md-padding>
    </md-card-content>
</md-card>

Material Design Forms

1 Answers1