View Source

References

Material Documentation
~~Dashboard Live Example~~

Usage Rules

Although we have mat-select available for use, we should instead use search-select for all dropdown instances. Rationale for always using search select:

Dropdowns with multiple options would benefit from a search function to more easily be able to find desired options
Dropdowns with ~4 or less options should not be used, mat-radio should be used to more easily be able to view all available options
Dropdowns with boolean options (e.g. yes/no, on/off) should not be used, mat-slide-toggle would function better to more obviously imply a boolean function

Example

Input

Product Design > Select > Screen Shot 2019-04-02 at 10.28.49.png

Dropdown

Product Design > Select > Screen Shot 2019-04-02 at 10.29.56.png

Usage

Structure

<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>

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.

Label

Use <label> for input labels

Input

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