material design component - mdc- textField

by jihoon kim

HTML

<head>
  <link href="https://unpkg.com/[email protected]/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
</head>

<label id="name" class="mdc-text-field mdc-text-field--fullwidth" data-mdc-auto-init="MDCTextField">
  <div class="mdc-text-field__ripple"></div>
  <input class="mdc-text-field__input" type="text" aria-labelledby="label">
  <span id="label" class="mdc-floating-label">Name</span>
  <div class="mdc-line-ripple"></div>
</label>

<label id="password"  class="mdc-text-field mdc-text-field--fullwidth">
  <div class="mdc-text-field__ripple"></div>
  <input class="mdc-text-field__input" type="password" aria-labelledby="my-label-id" required minlength="8">
  <span class="mdc-floating-label" id="my-label-id">Password</span>
  <div class="mdc-line-ripple"></div>
</label>

<label id="helper" class="mdc-text-field mdc-text-field--fullwidth">
  <div class="mdc-text-field__ripple"></div>
  <input class="mdc-text-field__input" type="text"
         aria-labelledby="my-label-id"
         aria-controls="my-helper-id"
         aria-describedby="my-helper-id">
  <span class="mdc-floating-label" id="my-label-id">Heler Text</span>
  <div class="mdc-line-ripple"></div>
</label>
<div class="mdc-text-field-helper-line">
  <div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
</div>

<label id="character_count" class="mdc-text-field mdc-text-field--fullwidth">
  <div class="mdc-text-field__ripple"></div>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" maxlength="10">
  <span class="mdc-floating-label" id="my-label-id">Character Count</span>
  <div class="mdc-line-ripple"></div>
</label>
<div class="mdc-text-field-helper-line">
  <div class="mdc-text-field-character-counter">0 / 121</div>
</div>

<label id="content" class="mdc-text-field mdc-text-field--textarea...

JavaScript

const name = new mdc.textField.MDCTextField(document.querySelector('#name'));
const password = new mdc.textField.MDCTextField(document.querySelector('#password'));
const helper = new mdc.textField.MDCTextField(document.querySelector('#helper'));
const character_count = new mdc.textField.MDCTextField(document.querySelector('#character_count'));

const content = new mdc.textField.MDCTextField(document.querySelector('#content'));
const content_character_count = new mdc.textField.MDCTextField(document.querySelector('#content_character_count'));
const prefill = new mdc.textField.MDCTextField(document.querySelector('#prefill'));


/* name.disabled = true; */