Angular Material form - adding a mat-checkbox ruins the stylesheet

I am having the hardest time adding a simple mat-checkbox to my Angular Material form. I created a sample project where the same problem reproduces.

<form>
  <mat-form-field>
    <mat-label>Some label</mat-label>
    <input type="number" matInput [formControl]="companyNameFormControl">
  </mat-form-field>
  <!-- <mat-form-field>
    <mat-label>Another label</mat-label>
    <mat-checkbox type="checkbox"></mat-checkbox>
  </mat-form-field> -->
</form>

Looks like:

When I uncommented the checkbox:

<form>
  <mat-form-field>
    <mat-label>Some label</mat-label>
    <input type="number" matInput [formControl]="companyNameFormControl">
  </mat-form-field>
  <mat-form-field>
    <mat-label>Another label</mat-label>
    <mat-checkbox type="checkbox"></mat-checkbox>
  </mat-form-field>
</form>

Then the page renders like this:

I have been googling for hours, but nothing seems to solve the problem.

For completeness the app module and component

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatCheckboxModule,
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-tour-of-heroes';
  companyNameFormControl = new FormControl('');
}

I rebuilt your setup in StackBlitz. If you open up your developer's console, you will see this error:

> ERROR Error: mat-form-field must contain a MatFormFieldControl.
at getMatFormFieldMissingControlError (vendor.js:68177:10)
at MatFormField._assertFormFieldControl (vendor.js:68449:13)
at MatFormField.ngAfterContentInit (vendor.js:68352:10)
at callHook (vendor.js:31528:14)
at callHooks (vendor.js:31501:9)
at executeInitAndCheckHooks (vendor.js:31458:5)
at refreshView (vendor.js:39182:11)
at refreshComponent (vendor.js:40157:7)
at refreshChildComponents (vendor.js:38941:5)
at refreshView (vendor.js:39193:7)

This means that the <mat-form-field> wrapper on your checkbox is not needed, as described in the official Angular Material docs. See below for the code, no need for a mat-form-field wrapper.

<section class="example-section">
  <mat-checkbox class="example-margin">Check me!</mat-checkbox>
  <mat-checkbox class="example-margin" [disabled]="true">Disabled</mat-checkbox>
</section>

And for your code, it means that this is sufficient:

<form>
  <mat-form-field>
    <mat-label>Some label</mat-label>
    <input type="number" matInput [formControl]="companyNameFormControl" />
  </mat-form-field>
  <mat-label>Another label</mat-label>
  <mat-checkbox type="checkbox"></mat-checkbox>
</form>

See this StackBlitz with a working example.