<section class="demo-section">
  <h2>Input Group</h2>

  <div class="demo-row">
    <div id="vue-input-group-app" class="vue-mount"></div>
  </div>

  <script type="module">
    import { createApp } from "vue";
    import { GnInputGroup, GnInput, GnIconButton } from "/vue/index.js";

    createApp({
      components: { GnInputGroup, GnInput, GnIconButton },
      template: document.getElementById("vue-input-group-template").innerHTML
    }).mount("#vue-input-group-app");
  </script>

  <script type="text/template" id="vue-input-group-template">
    <gn-input-group style="max-width: 420px;">
      <template #addon>https://</template>
      <gn-input placeholder="example.com" />
      <template #action>
        <gn-icon-button icon="ph-magnifying-glass" label="Search" variant="primary" />
      </template>
    </gn-input-group>
  </script>
</section>