Content Comparison

References

• Material Documentation

• Dashboard Live Example

Usage Rules

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

...

Dropdown

...

Usage

Structure

<div<single-select classlabel="mat-form-optionLabel"> required="true"  <label>Checkbox Group Label</label>
  <mat-checkbox>Option 1<mat-checkbox>
  <mat-checkbox>Option 2<mat-checkbox>
  <mat-checkbox>Option 3<mat-checkbox>
</div>... ></single-select>

Container

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

Label

• Use <label> label=”” for the input labelslabel

Input

...

Required

• Use required=”true” or required=”false”

Additional Options

• Various other options available (see live examples)

Multi-Select

N/A (Not implemented yet)