Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 5 Next »

References

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

Dropdown

Usage

Structure

<div class="mat-form-field">
  <label>Search Select</label>
  <search-select [options]=""></search-select>
</div>

Container

  • Every search dropdown should have a mat-form-field container, which formats its' content styles and spacing.

Label

  • Use <label> for input labels

Input

  • Use select-select for all instances of <select>

  • No labels