ipsos-components/src/demo-app/a11y/input/input-a11y.html

Material Design components for Angular

<section>
  <h2>Basic input box (e.g. name field)</h2>
  <mat-form-field floatLabel="never">
    <input matInput placeholder="First name" [(ngModel)]="firstName">
  </mat-form-field>
  <mat-form-field floatLabel="never">
    <input matInput placeholder="Last name" [(ngModel)]="lastName">
  </mat-form-field>
</section>

<section>
  <h2>Input with hint (e.g. password field)</h2>
  <mat-form-field hideRequiredMarker>
    <input matInput [type]="passwordType" placeholder="Password" [(ngModel)]="password" required
           #passwordModel="ngModel">
    <button mat-icon-button matSuffix [attr.aria-label]="passwordToggleLabel"
            (click)="showPassword = !showPassword">
      <mat-icon>{{passwordToggleIcon}}</mat-icon>
    </button>
    <mat-hint>Hint: favorite color</mat-hint>
    <mat-error *ngIf="passwordModel.hasError('required')">You must enter your password.</mat-error>
  </mat-form-field>
</section>

<section>
  <h2>Input with error message (e.g. email field)</h2>
  <mat-form-field>
    <input matInput type="email" placeholder="Email" [(ngModel)]="email" required email
           #emailModel="ngModel">
    <mat-error *ngIf="emailModel.hasError('required')">You must enter your email.</mat-error>
    <mat-error *ngIf="emailModel.hasError('email')">Not a valid email address.</mat-error>
  </mat-form-field>
</section>

<section>
  <h2>Input with prefix & suffix (e.g. currency converter)</h2>
  <mat-form-field floatLabel="always">
    <input matInput type="number" placeholder="USD" [(ngModel)]="usd">
    <span matPrefix>$</span>
  </mat-form-field>
  =
  <mat-form-field floatLabel="always">
    <input matInput type="number" placeholder="JPY" [(ngModel)]="jpy">
    <span matPrefix>‎¥‎</span>
  </mat-form-field>
  (as of 7/31/2017)
</section>

<section>
  <h2>Textarea input (e.g.  comment box)</h2>
  <mat-form-field>
    <textarea matInput aria-label="Comment" [(ngModel)]="comment" matTextareaAutosize
              [maxlength]="commentMax" #commentModel="ngModel"></textarea>
    <mat-hint>Leave us a comment!</mat-hint>
    <mat-hint align="end">{{commentCount}}/{{commentMax}}</mat-hint>
  </mat-form-field>
</section>