By default, Fuse changes the default form field appearance to fill and heavily modifies it to provide a more unique and consistent look. We DO NOT recommend using any other form field styles as they are not optimized for Fuse.
Here's a very simple form layout to showcase the form fields.
Following form contains examples to showcase different label and placeholder styles. All fields in this example are standard text inputs but everything you see here can also be applied to other input types such as textarea, select, chips etc.
Following form contains examples to showcase different subscript sizing methods. Focus on the inputs and then blur them to see how the mat-error acts differently in different cases.
The best way of using Form Fields is to have dynamic subscript sizing with fixed spacing around the fields.
Following form contains examples to showcase form field variations. In addition to the heavy modifications, Fuse also provides set of helper classes to further modify the style of the form fields.
.fuse-mat-bold
Provides set of adjustments to make the fields' border bolder.
.fuse-mat-dense
Provides set of adjustments to make the fields denser. Dense fields are suitable for non-form usages and places where there isn't much space to work with such as small dialogs, menus, popovers and etc.
.fuse-mat-rounded
Provides set of adjustments to make the fields look fully rounded.
.fuse-mat-emphasized-affix
Provides set of adjustments to emphasize the field prefix and suffix by changing their background color and adding a border around them.
<mat-form-field class="{{getFormFieldHelpersAsString()}}">...<mat-form-field>