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.