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 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-textarea
This helper class is required if you are using a textarea as your input. Since Angular Material doesn't differentiate a textarea from a normal input while using them with mat-form-field, this helper class is required for textarea inputs to look good and consistent.
.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-no-subscript
Provides set of adjustments to remove the bottom spacing where hint and error messages placed. This helper is particularly useful to align the field easily if you don't need to show error messages or hint text. For example a search bar in the toolbar uses this helper to fit the field to the toolbar without having an extra bottom spacing.
.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>