Name
Product
Service
HR
Accounting1
Name
Name
Name
Name
Product
Service
HR
 

<div style="display: inline-flex; flex-direction: column; gap: 1rem;">
  <vcf-lookup-field>
  </vcf-lookup-field>
  <vcf-lookup-field disabled>
  </vcf-lookup-field>
  <vcf-lookup-field readonly>
  </vcf-lookup-field>
  <vcf-lookup-field invalid>
  </vcf-lookup-field>
  <vcf-lookup-field>
  </vcf-lookup-field>
</div>
<script>
  window.addEventListener('WebComponentsReady', () => {
    const lookupField = document.querySelectorAll('vcf-lookup-field');
    lookupField[0].items = [
      {id: '1', name: 'Product'},
      {id: '2', name: 'Service'},
      {id: '3', name: 'HR'},
      {id: '4', name: 'Accounting1'}
    ];
    lookupField[0].itemValuePath = 'id';
    lookupField[0].itemLabelPath = 'name';
    lookupField[0].header = 'header';
    lookupField[0].i18n = {
      headerprefix:"-headerprefix-",
      create:"-create-",
      cancel:"-cancel-",
      select:"-select-"};
    lookupField[4].items = [
      {id: '1', name: 'Product'},
      {id: '2', name: 'Service'},
      {id: '3', name: 'HR'}
    ];
    lookupField[4].itemValuePath = 'id';
    lookupField[4].itemLabelPath = 'name';
  });
</script>