Angular Material: mat-checkbox vertical alignment of checkbox

Question

I can't seem to override the defaults to vertically align the checkbox relative to the checkbox label. Searched for a while but nothing has worked. See example image:

Should be like:

Have tried the following:

.mat-checkbox-inner-container {
    margin: none;
}

HTML:

<label><b>Home Type</b></label>
    <mat-checkbox>Entire place<br><small class="text-muted">Have a place to yourself</small></mat-checkbox>
    <mat-checkbox>Private room<br><small class="text-muted">Have your own room and share some common spaces</small></mat-checkbox>
    <mat-checkbox>Shared room<br><small class="text-muted">Stay in a shared space, like a common room</small></mat-checkbox>

No, I haven't been back to revisit it. There are a couple of solutions below suggested which I will try when I get time. Please comment below them if they work for you. — MadMac
– MadMac, Commented Apr 27, 2019 at 1:34
Pat M's answer below worked if I added that styling to a global stylesheet, but did not work if I added that class to a component's stylesheet. I'm guessing Angular's view-encapsulation prevents the component's style from overriding the material styling. Hope this helps — phelhe
– phelhe, Commented Apr 29, 2019 at 16:52

Pat M · Accepted Answer · 2019-04-10 14:05:35Z

11

Similar to Craig's answer but as a descendant of .mat-checkbox.mat-accent to spare the need of using "!important"

.mat-checkbox.mat-accent .mat-checkbox-inner-container {
    margin: 2px 8px auto 0;
}

or using sass/less

.mat-checkbox.mat-accent {
   .mat-checkbox-inner-container {
      margin: 2px 8px auto 0;
   }
}

answered Apr 10, 2019 at 14:05

Pat M

6,0547 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

phelhe Over a year ago

Did you have to add this to a global stylesheet? I tried pasting this into the stylesheet for one of my components but it didn't work, and I would like to avoid making it a global style..

Pat M Over a year ago

Unfortuntely, it seems that it can't be applied from within an angular framework component for example. Since the classes mat-accent & mat-checkbox-inner-container are generated by angular material (from <mat-checkbox>) after the angular component has been executed and it's style applied. I also need to use some material.scss globally for these cases.

phelhe Over a year ago

Thanks, that's what I figured. I ended up adding it to a global sass sheet but wrapping it in my own class to avoid affecting the styles of other checkboxes throughout the app

Craig · Accepted Answer · 2019-01-08 22:19:54Z

4

Just run into the same problem. I used the following to solve it (unfortunately needs the dreaded !important):

.mat-checkbox-inner-container {
  margin: 2px 8px auto 0 !important;
}

I found I had to adjust the top margin (2px in this case) to get the layout beside the label to look correct.

answered Jan 8, 2019 at 22:19

Craig

9902 gold badges11 silver badges22 bronze badges

Comments

1252748 · Accepted Answer · 2020-05-15 22:06:52Z

3

I was able to achieve this (I'm using Angular/Material 7.x) by resetting the margins the checkbox container uses.

Note that I have had to apply an additional translateY to account for the box's border-width, and reset the wrap on the label so the text doesn't try to stay on one line.

your.component.scss

:host {
  ::ng-deep {
    .mat-checkbox-inner-container {
      margin-top: initial;
      margin-bottom: initial;
      transform: translateY(2px); // value of checkbox border-width
    }
    .mat-checkbox-label {
      white-space: normal; // wrap label text
    }
  }
}

StackBlitz Fiddle

answered May 15, 2020 at 22:06

1252748

15.5k35 gold badges118 silver badges244 bronze badges

Comments

Pytth · Accepted Answer · 2020-07-29 17:40:35Z

1

I know this is old, but below worked for me – I honestly didn't even know auto worked with vertical alignment, but I guess it does 🤷🏽‍♂️:

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

answered Jul 29, 2020 at 17:40

Pytth

4,1961 gold badge28 silver badges32 bronze badges

Comments

remy · Accepted Answer · 2024-05-04 18:01:30Z

1

My solution for "@angular/core": "^17.3.2"

::ng-deep {
  .mdc-form-field.mat-internal-form-field {
    align-items: flex-start;
  }

  .mdc-form-field>label {
    padding-top: 12px; /* maybe you have to adjust this for your needs */
  }
}

Setting the margin (as in the other answers here) did not work for my case. The mat-checkbox has this padding/ripple so it still would look like the box does not fit with the (first) line of the label.

The outer div has the properties display: inline-flex; align-items: center; for the checkbox itself an its label. So we simply change this behavior and add some custom padding.

answered May 4, 2024 at 18:01

remy

1121 silver badge10 bronze badges

Comments

Sebastian Vidal · Accepted Answer · 2025-09-23 19:26:07Z

1

You can also try using position absolute and moving it downwards depending on the size of the small text

 .mat-mdc-checkbox:has(.text-muted) {
    .text-muted {
      position: absolute;
      top: var(--mat-checkbox-label-text-size);
      margin-top: 16px; // this can be adjusted
    }
  }

answered Sep 23 at 19:26

Sebastian Vidal

11 bronze badge

Comments

YAO ALEX DIDIER AKOUA · Accepted Answer · 2021-11-24 07:59:13Z

<div>
  <h1>LABEL CHECKBOX</h1>
  <mat-checkbox class="mat-checkbox-layout"><strong>FINE</strong>Lorem ipsum dolor sit amet consectetur adipisicingelit. Optio vitae molestiae nemo magni odio voluptate corporis veniam sapiente earum fugiat rem,maiores et placeat qui iure, nobis ipsam sintenim.</mat-checkbox>
  <mat-checkbox class="mat-checkbox-layout"><strong>OK</strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.Optio vitae molestiae nemo magni odio voluptate corporis veniam sapiente earum fugiat rem, maiores et placeat qui iure, nobis ipsam sintenim.</mat-checkbox>
</div>

And the CSS is this (I create css class identically with angular css class)

.mat-checkbox-layout {
  text-align: justify;
}

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

Sanid Sa · Accepted Answer · 2022-05-25 08:58:38Z

0

:host {
  ::ng-deep {
    .mat-checkbox-layout {
      align-items: end!important;
    }
    .mat-checkbox-label {
      white-space: normal; // wrap label text
    }
  }
}

answered May 25, 2022 at 8:58

Sanid Sa

3133 silver badges10 bronze badges

1 Comment

Marcello B. Over a year ago

Hello please add additional information as to how/why this answer helps solve the question. Please consider reviewing the answering guidelines stackoverflow.com/help/how-to-answer

C Halsema · Accepted Answer · 2024-03-31 17:08:29Z

0

In "@angular/material": "16.2.12", you need to use mdc format.

.mat-checkbox-inner-container does not appear to be used anymore.

Use this instead

.mdc-checkbox  {
    margin: 0px 8px auto !important;
}

answered Mar 31, 2024 at 17:08

C Halsema

813 bronze badges

Comments

AnasM · Accepted Answer · 2018-12-09 06:56:28Z

-1

There is a fast solution which is not related to ng-material

you can put your "mat-checkbox" into "li" element and align your "ul" by setting the number of columns like this:

<ul style="columns:2">
    <li>
        <mat-checkbox>Entire place<br><small class="text-muted">Have a place to yourself</small></mat-checkbox>
    </li>
    <li>
        <mat-checkbox>Private room<br><small class="text-muted">Have your own room and share some common spaces</small></mat-checkbox>
    </li>
    <li>
        <mat-checkbox>Shared room<br><small class="text-muted">Stay in a shared space, like a common room</small></mat-checkbox>
    </li>
</ul>

answered Dec 9, 2018 at 6:56

AnasM

1

1 Comment

MadMac Over a year ago

That just puts it into 2 columns. I am trying to move the check box to align with the top of the text.

Collectives™ on Stack Overflow

Angular Material: mat-checkbox vertical alignment of checkbox

10 Answers 10

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related