Make a multiline checkbox in Material (angular)

Question

I have a checkbox I want to have a label with a multiline. How can you break the label of this?

 <mat-checkbox>a somewhat longer label!</mat-checkbox>

I tried with css

mat-checkbox span { white-space: pre-wrap; }

but that looks weird

Answer 1

There is an existing issue about this on github, but here is a workaround.

Update: From Angular 15 and on:

To style the checkbox for the current component, just add the following to the component.css file:

:host::ng-deep.mat-mdc-checkbox .mdc-checkbox {
  margin-top: -0.5em !important;
}
:host::ng-deep.mat-mdc-checkbox .mdc-form-field {
  align-items: start !important;
}

If you want to apply it to all checkboxes of the entire app. Add the following to styles.css:

.mat-mdc-checkbox .mdc-checkbox {
  margin-top: -0.5em !important;
}
.mat-mdc-checkbox .mdc-form-field {
  align-items: start !important;
}

Prior to Angular version 15:

To style the checkbox for the current component, just add the following to the component.css file:

:host::ng-deep.mat-checkbox-layout{
white-space: normal !important;
}

:host::ng-deep.mat-checkbox-inner-container{
    margin-top: 4px;
}

If you want to apply it to all checkboxes of the entire app. Add the following to styles.css:

.mat-checkbox-layout{
white-space: normal !important;

}
.mat-checkbox-inner-container{
    margin-top: 4px;
}

Answer 2

Follow the example, bootstrap text-wrap class used

<mat-checkbox>
   <div class="text-wrap">
    a somewhat longer label!
   </div>
 </mat-checkbox>