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.

Appearance

Here's a very simple form layout to showcase the form fields.

First name Last name
Address
City State
Postal code {{postalCode.value.length}} / 5

Labels and Placeholders

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.

Label Label and Placeholder Label and Placeholder on focus

Subscript sizing

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.

Fixed subscript sizing Required field! Fixed subscript sizing with mat-hint Hint text for the field Required field!
Dynamic subscript sizing Required field! Dynamic subscript sizing with mat-hint Hint text for the field Required field!

Field variations

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.

Usage

<mat-form-field class="{{getFormFieldHelpersAsString()}}">...<mat-form-field>

Bold Dense Rounded Emphasized affix

With mat-label

Input This is a hint text
Number
Input with mat-icon as prefix & suffix
Input with mat-icon-button as prefix & suffix
Input with text prefix & suffix $ .00
Right aligned input with text prefix & suffix $ .00
Input with mat-select as prefix & suffix EU US kg gr oz
Textarea
Textarea with prefix & suffix
Textarea with autosize
Textarea with autosize, prefix & suffix
Select with prefix Select 1-1 Select 1-1 Select 1-1 Select 1-1 Select 1-1 Select 1-1 Select 1-1 Select 1-2 Select 1-3 Select with suffix Select 2-1 Select 2-1 Select 2-1 Select 2-1 Select 2-1 Select 2-1 Select 2-1 Select 2-2 Select 2-3
Native select with prefix Native select with suffix
Lemon Lime Apple
Choose a date

Without mat-label

$ .00
$ .00
EU US kg gr oz
Select 1-1 Select 1-1 Select 1-1 Select 1-1 Select 1-1 Select 1-1 Select 1-1 Select 1-2 Select 1-3 Select 2-1 Select 2-1 Select 2-1 Select 2-1 Select 2-1 Select 2-1 Select 2-1 Select 2-2 Select 2-3
Lemon Lime Apple