How To Change Height of mat-form-field in Angular Material?

Last Updated : 08 Jan, 2025

The default height of the mat-form-field may not always fit your design requirements. To adjust the height of a mat-form-field in Angular Material, you typically need to override some CSS properties.

Prerequisite

Changing Height in mat-form-field

By default, mat-form-field comes with a fixed height. To change the height, you can override the CSS styles of the form field, input and container elements.

<mat-form-field appearance="outline" class="custom-height">
    <mat-label>Enter your name</mat-label>
    <input matInput placeholder="Name" />
</mat-form-field>

Open the component's CSS file (e.g., your-component.component.css).

Apply custom styles to adjust the height. Here’s an example:

.custom-height {
    height: 60px;
    /* Set the height you desire */
}

.custom-height .mat-form-field-wrapper {
    padding-bottom: 0;
    padding-top: 0;
    height: 100%;
}

.custom-height .mat-input-element {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    line-height: 60px;
}

/* You can also directly target the element */
mat-form-field {
    height: 150px;
}

Now Let's create a Password validator app with modified mat-form-field height

Steps To Change Height of mat-form-field

We are modifying the height of he form field of Password Validator. To get the complete code follow the article - Password Validation in Angular

Step 1: Implement the view in the app.component.html

HTML

<!-- app.component.html -->

<h1>Password Confirmation Form</h1>
<form [formGroup]="passwordForm" (ngSubmit)="onSubmit()" class="form-container">
    <div class="input-container">
        <!-- Password field -->
        <mat-form-field appearance="outline" class="custom-height">
            <mat-label>Password</mat-label>
            <input matInput type="password" id="password" formControlName="password" />
        </mat-form-field>

        <!-- Confirm password field -->
        <mat-form-field appearance="outline" class="custom-height">
            <mat-label>Confirm Password</mat-label>
            <input matInput type="password" id="confirmPassword" 
                   formControlName="confirmPassword" />
        </mat-form-field>
    </div>

    <!-- Error message container on the right -->
    <div class="error-message-container">
        <!-- Error messages for password field -->
        <mat-error *ngIf="hasError('password', 'required')">
            Password is required
        </mat-error>
        <mat-error *ngIf="hasError('password', 'minlength')">
            Password must be at least 6 characters long
        </mat-error>
        <mat-error *ngIf="hasError('password', 'uppercase')">
            Password must contain at least one uppercase letter
        </mat-error>
        <mat-error *ngIf="hasError('password', 'number')">
            Password must contain at least one number
        </mat-error>
        <mat-error *ngIf="hasError('password', 'specialCharacter')">
            Password must contain at least one special character
        </mat-error>

        <!-- Error message for confirm password field -->
        <mat-error *ngIf="passwordForm.errors?.['passwordMismatch'] 
                      && passwordForm.get('confirmPassword')?.touched">
            Passwords do not match!
        </mat-error>
    </div>

    <!-- Submit button -->
    <button mat-raised-button color="primary" type="submit" [disabled]="passwordForm.invalid">
        Submit
    </button>
</form>

Step 2: Styles the form and modify the height of mat-form-field

CSS

/* app.component.css*/

h1 {
    text-align: center;
    margin-bottom: 20px;
}

/* Styling the form container */
.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Styling the input field container */
.input-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 30%;
}

.custom-height {
    height: 60px;
    /* Set the height you desire */
}

/* Styling the form field container */
mat-form-field {
    width: 100%;
    margin-bottom: 10%;
}

/* Increase the input field size */
mat-form-field input {
    height: 45px;
    font-size: 16px;
}

/* Error message styles */
mat-error {
    font-size: 12px;
    color: red;
}

/* Button styles */
button {
    margin-top: 20px;
    width: 30%;
    padding: 12px;
    font-size: 16px;
}

/* Media query for responsiveness */
@media (max-width: 600px) {
    .form-container {
        width: 90%;
    }

    .input-container {
        width: 100%;
    }
}