@vcl/vcl/token-input/demo/example-form.html

The whole VCL in one package

<form class="form">
  <div class="form-control-group">
    <label class="form-control-label" for="example_form_input_0">
      Label
      <em class="required-indicator">•</em>
    </label>
    <div class="token-input input-field" role="combobox" aria-expanded="false" aria-haspopup="true" aria-autocomplete="list" aria-owns="id-of-corresponding-dropdown">
      <div class="token-container">
        <div class="token">
          <span class="token-label">blue</span>
        </div>
    
        <div class="token">
          <span class="token-label">red</span>
          <button type="button" class="button transparent" tabindex="-1">
            <div class="icogram">
              <div class="icon fas fa-times" aria-hidden="true" aria-label="remove" role="img"></div>
            </div>
          </button>
        </div>
      </div>
    
      <input class="input" placeholder="Type to add tokens" autocomplete="off" type="text">
    </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');

      function checkValue() {
        if (typeof input.value === 'string' && input.value.length > 0){
          fcg.classList.remove('floating');
        } else {
          fcg.classList.add('floating');
        }
      }

      input.addEventListener('focus', () => {
        inputField.classList.add('focused');
        fcg.classList.add('focused');
      })
      input.addEventListener('blur', () => {
        inputField.classList.remove('focused');
        fcg.classList.remove('focused');
      });

      input.addEventListener('input', checkValue);

      // Calculate label offset by determining width of elements before the input field
      let current = input;
      let offset = 0;
      while(current =  current.previousElementSibling) {
        offset += current.offsetWidth;
      }

      fcg.style.setProperty('--label-offset-x', `${offset}px`);

      checkValue();

      setTimeout(() => {
        fcg.classList.remove('disable-animations');
      }, 0);

    }

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