Input

  <wc-input type="text" required="true" label="Text input label" helper-text="Optional help text" placeholder="Optional placeholder text"></wc-input>

  <wc-input type="text" required="true" variant="outlined" label="Text input label" helper-text="Optional help text" placeholder="Optional placeholder text"></wc-input>

  <wc-input type="password" label="Password" helper-text="Optional help text" placeholder="Optional placeholder text"></wc-input>

  <wc-input type="text" skeleton="true" required="true" label="Text input label" helper-text placeholder="Optional placeholder text"></wc-input>

    <wc-input label="Email" type="text" size="lg">
      <wc-icon slot="start" name="mail"></wc-icon>
      <div slot="end">@example.com</div>
    </wc-input>

    <wc-input type="text" label="Card Number">
      <wc-icon slot="start" name="credit_card"></wc-icon>
      <circular-progress slot="end" indeterminate="true"></circular-progress>
    </wc-input>

  <wc-input disabled="true">
    <wc-icon slot="start" class="inherit" name="mail"></wc-icon>
    <span slot="end">@example.com</span>
  </wc-input>

  <wc-input readonly="true">
    <wc-icon slot="start" class="inherit" name="mail"></wc-icon>
    <span slot="end">@example.com</span>
  </wc-input>

  <wc-input label="City" error="true" error-text="Please provide a valid city" value="America"></wc-input>
  <wc-input label="City" warning="true" warning-text="Please provide a valid city" value="America"></wc-input>

  <wc-input variant="default" id="name-input-field" placeholder="Type here"></wc-input>

  <script>
    document.querySelector('#name-input-field').addEventListener('input', function(event) {
      myConsole.log('pc-input--input :: ' + event.target.value);
    });
    document.querySelector('#name-input-field').addEventListener('change', function(event) {
      myConsole.warn('pc-input--change :: ' + event.target.value);
    });
  </script>