User Interface
Forms

## Fields

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

## 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.

### Required classes

- `.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.

<mat-form-field class="fuse-mat-textarea"> <mat-label>Note</mat-label> <textarea matInput></textarea> </mat-form-field>

### Optional classes

- `.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.

### Usage

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

Dense Rounded No subscript Emphasized affix

### With mat-label

Input This is a hint text
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