@vcl/vcl/input/demo/example-form-control-group.html

The whole VCL in one package

<form class="form" id="example-input-form">
  <div class="form-control-group">
    <label for="example_form_input_0" class="form-control-label clickable"></label>
    <div class="input-field">
      <input id="example_form_input_0" type="text">
    </div>
    <span class="form-control-hint">Form Control Hint</span>
  </div>
  <div class="form-control-group embedded-input-field-label floating">
    <label for="example_form_input_1" class="form-control-label">
      Floating label
      <em class="required-indicator">•</em>
    </label>
    <div class="input-field">
      <input id="example_form_input_1" type="text">
    </div>
    <span class="form-control-hint">Form Control Hint</span>
  </div>
  <div class="form-control-group embedded-input-field-label static">
    <label for="example_form_input_2" class="form-control-label">
      Static label
      <em class="required-indicator">•</em>
    </label>
    <div class="input-field">
      <input id="example_form_input_2" type="text">
    </div>
    <span class="form-control-hint">Form Control Hint</span>
  </div>
  <div class="form-control-group embedded-input-field-label floating">
    <label for="example_form_textarea_1" class="form-control-label">
      Textarea label
      <em class="required-indicator">•</em>
    </label>
    <div class="input-field auto-height">
      <textarea id="example_form_textarea_1"></textarea>
    </div>
    <span class="form-control-hint">Form Control Hint</span>
  </div>
  <div class="form-control-group embedded-input-field-label floating" data-calc-offset>
    <label for="example_form_input_3" class="form-control-label">
      Floating label with offset
      <em class="required-indicator">•</em>
    </label>
    <div class="input-field">
      <div class="icon fas fa-search"></div>
      <input id="example_form_input_3" type="text">
      <button class="button square">
        <div class="icogram">
          <div class="icon fas fa-times-circle" aria-hidden="true" aria-label="Clear" role="img"></div>
        </div>
      </button>
    </div>
    <span class="form-control-hint">Form Control Hint</span>
  </div>
  <div class="form-control-group embedded-input-field-label floating disabled" data-calc-offset>
    <label for="example_form_input_4" class="form-control-label">
      Disabled state
      <em class="required-indicator">•</em>
    </label>
    <div class="input-field disabled">
      <div class="icon fas fa-search"></div>
      <input id="example_form_input_4" disabled type="text" value="">
      <button class="button square">
        <div class="icogram">
          <div class="icon fas fa-times-circle" aria-hidden="true" aria-label="Clear" role="img"></div>
        </div>
      </button>
    </div>
    <span class="form-control-hint">Form Control Hint</span>
  </div>
  <div class="form-control-group embedded-input-field-label floating disabled" data-calc-offset>
    <label for="example_form_input_4" class="form-control-label">
      Disabled state with value
      <em class="required-indicator">•</em>
    </label>
    <div class="input-field disabled">
      <input id="example_form_input_4" disabled type="text" value="The value">
    </div>
  </div>

  <div class="form-control-group embedded-input-field-label floating" style="--label-offset-x: 2.5rem;">
    <label for="example_form_input_5" class="form-control-label">
      Custom content with label offset
      <em class="required-indicator">•</em>
    </label>
    <div class="row">
      <button type="button" class="button transparent" style="width: 2.5rem;">
        <div class="icon fas fa-cog" aria-hidden="true" role="img"></div>
      </button>
      <div class="input-field flex">
        <div class="icon fas fa-search"></div>
        <input id="example_form_input_5" type="text">
      </div>
      <div class="px-5"></div> <!-- spacer -->
      <button type="button" class="button transparent">
        <div class="icon fas fa-question-circle" aria-hidden="true" role="img"></div>
      </button>
    </div>
    <span class="form-control-hint">Form Control Hint</span>
  </div>
</form>
<script>
  !function() {
    const docRoot = document.demoShadowRoot || document;

    function registerInputFieldListeners(fcg) {
      const inputField = fcg.querySelector('.input-field');
      const input = inputField.querySelector('input, textarea');

      function updateState() {
        const hasValue = typeof input.value === 'string' && input.value.length > 0;
        const hasFocus = docRoot.activeElement === input;

        if (hasFocus) {
          inputField.classList.add('focused');
          fcg.classList.add('focused');
        } else {
          inputField.classList.remove('focused');
          fcg.classList.remove('focused');
        }

        if (hasValue || hasFocus) {
          fcg.classList.remove('floating');
        } else {
          fcg.classList.add('floating');
        }
      }

      input.addEventListener('focus', updateState);
      input.addEventListener('blur', updateState);
      input.addEventListener('input', updateState);

      updateState();

      let prependedElements = 0, sibling = input;
      while (sibling = sibling.previousElementSibling) {
        prependedElements++;
      }
      fcg.style.setProperty('--prepended-elements', prependedElements);

      if (prependedElements > 0) {
        fcg.style.setProperty('--floating-label-padding', '0em');
      }

    }

    const form = docRoot.querySelector('#example-input-form');
    form.querySelectorAll('.form-control-group').forEach(fcg => registerInputFieldListeners(fcg));
  }();
</script>