Forms are one of the most important and most used components
of any web application. Below, you can find couple of ready
to use form layout examples which you can use as the base of
your own forms.
Sectioned form with dividers
This sectioned form example uses dividers to separate the
different sections of the form. Form fields uses
placeholders and don't have separate labels for
more compact look.
Sectioned form with dividers #2
This sectioned form example uses dividers to separate the
different sections of the form, section title and
description is horizontally aligned with the section fields.
Form fields uses mat-label to have separate labels
as well as placeholders for hints.
Sectioned form with dividers #3
This sectioned form example uses dividers and colors to
separate the different sections of the form. Form fields
have labels and dense style.
Sectioned form with separate cards
This sectioned form example uses cards to separate the
sections of the form. This kind of form layouts are more
suitable for Settings or similar pages.
Sectioned form with separate cards #2
This sectioned form example uses cards and whitespace to
separate the different sections of the form, section title
and description is horizontally aligned with the section
fields. Form fields have labels and
dense style.
Sectioned form with separate cards #3
This sectioned form example uses cards and whitespace to
separate the different sections of the form, section title
and description is horizontally aligned with the section
fields. Form fields have separate labels and
dense style.