Versions Compared

Version Old Version 8 New Version Current
Changes made by

Amish Ladhu

Amish Ladhu

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

References

Example

Inline

Image RemovedImage Added

Full Width

Image RemovedImage Added

Usage

Structure

Code Block
languagehtml
// Inline

<div class="mat-form-option">
  <label>Checkbox Group Label</label>
  <mat-checkbox>Option 1<mat-checkbox>
  <mat-checkbox>Option 2<mat-checkbox>
  <mat-checkbox>Option 3<mat-checkbox>
</div>

// Full Width

<div class="mat-form-option mat-checkbox-layout-block">
  <label>Checkbox Group Label</label>
  <mat-checkbox>Option 1<mat-checkbox>
  <mat-checkbox>Option 2<mat-checkbox>
  <mat-checkbox>Option 3<mat-checkbox>
</div>

Container

  • Every checkbox should have a mat-form-option container, which formats its' content styles and spacing, and facilitates the label for a checkbox group.

  • Use the mat-checkbox-layout-block alongside the parent mat-form-option container to force each checkbox to be on it’s own line.

Label

  • Use <label> for input labels

Input

  • Use mat-checkbox for all instances of <input type="checkbox">